CSS Pseudo-Elements

Pseudo-elements can control the styling of specific parts of the elements. The pseudo-elements have a double colon before them and can be used by being added after the selectors like
selector::pseudo-element{…}
The pseudo-elements supported by CSS are:

  • ::first-line
  • ::first-letter
  • ::after
  • ::before
  • ::selection
  • ::first-line

This is to stylize the first line of the text content. You can alter the following for this element:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

::first-letter

This element concerns the first letter of the text. In addition to above mentioned properties, first-letter can also by stylised for:

  • margin
  • padding
  • border
  • float

::before

This pseudo-element helps us to insert anything before the element content. You can insert an image before your text using ::before.

::after

It is the opposite of ::before. Here, you can add something after the element content.

::selection

The selection of text generally inverts the background and font color of the selected text. For example, if you select a black text on white background, it will turn to something like white text on black background. However, these effects can be changed in web-pages using the pseudo element ::selection. ::selection can help us set the background color as well as the font color of the selected text. The IE 8 and earlier versions don’t support this pseudo-elements.

Multiple pseudo elements

We can also combine the effects of the pseudo-elements. For example, if you want the first letter to be in one color and rest of the first line in another color, you can set both the ::first-letter and the ::first-line for that element. Similarly, you can combine the effects of first line with ::selection or add some image before or after the text using ::before and ::after.

Apart from this, you can also combine the pseudo element with the element classes. All have to do is mention the element then its class and finally the pseudo element, like:

selector.class::pseudo-element

CSS Box Sizing

The actual rendered width and height of any element is calculated by including the width and height set along with that of its padding and borders.

However, CSS has a way to include these two within the total height and width of the element. This is where Box Sizing comes in picture.

Here’s the default formula for calculating the rendered width and height of the element

width (set using width property) + padding (left and right) + border (left and right) = actual width of an element
height (set using width property) + padding (top and bottom) + border (top and bottom) = actual height of an element

In short, the height and width of the element appear to be more than what was set by you in the CSS design. This problem is solved by the Box-sizing feature of CSS.

Here, the padding and border are also included within the element’s total dimensions rather than in addition to it. To do this, we use the CSS property box-sizing property. We give the value as “border-box” to include the padding and borders within the box.

Basically, the box-sizing property helps us to control the area for which we want to set the width and height property. It can just be the content area or the padding and borders included as well.

Here are some permissible values for the same:
content-box: This is the default value. The width and height properties can only set the dimensions for the content area and hence the rendered element will have a slightly larger appearance because of the added dimensions of padding and border.
border-box: The width and height properties set the cumulative dimensions of content area, padding, and border.
initial: Sets the default value
inherit: Inherits the whatever value is set for the parent element in this property. If no value is set in the parent element, content-box will be set by default for both.

CSS Media Query

Media query was introduced in CSS3. The feature uses the @media rule which helps us to include certain CSS properties only if some conditions are met.

Breakpoint

Firstly, we can start with the breakpoints. Even if they’re responsive, the web-pages may, sometimes, not look very good on small screens. To solve this issue, Media Query helps us add breakpoints that will make the elements behave differently for different screens.

For instance, if you put a breakpoint at, say, 700px The elements design will automatically shift at screens less and more than 700px

Mobile First

It is a standard convention to design the page for mobile first and then for desktop or any other device. Thus, instead of the styles changing at widths less than 768px, we should design them to change at widths more than 768px.

Multiple Breakpoints

We can add multiple breakpoints for different screens like phone, tablet, desktop etc. Typically breakpoints are created at 5 points i.e.:
600px (min-width)
600px (max-width)
768px
992px
1200px

Portrait / Landscape

The browser can have two different orientations – Portrait or Landscape. The portrait is the orientation where, conventionally, height is more than the width and vice-versa for landscape.

Media queries can help us change the layout based on these orientations. You can set some CSS properties that will only work for the Landscape orientation or Portrait orientation.

Hide Elements

We can also hide some elements on different screens based on their size. This helps us to organize the elements better on smaller screens where they can be too much after a certain number.

Font Size

The text on the web pages also needs to be handled for its font-size on different screens. This ensures the readability of the text by keeping it just the right size as per the screen.

CSS Flexbox Layout Module

CSS had four known layout modes before the Flexbox Layout module was introduced. We had:
Block
Inline
Table
Positioned

With the help of flexbox or the Flexible Box Layout Module we can easily design a flexible responsive layout structure that does not need float or positioning.

Elements

To start with, we need to define what is called a flex container. A flex container is, basically, a parent element whose display property is set to ‘flex’. By setting the container element as the flex container, following properties are enabled:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Let’s take an individual look at them

flex-direction:It states the direction in which the flex items will be stacked

flex-wrap: We can set if the flex items need to wrap or not, using this property.

justify-content:This is to align the flex items

align-items: This is for the vertical alignment of the items.

align-content: The flex lines can be aligned using this property

Perfect Centering: It is an issue of aligning the element in a flexbox, exactly at the center in both directions. This can be achieved by setting both, justify-content and align items to the center.

Items

Items/child items/flex items are the direct children of the flex container. Here are the properties associated with them:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
To specify the order of the items

flex-grow: Using this property, we can decide how much an item is going to grow relative to the other flex items

flex-shrink: Opposite of flex-grow. Specifies how much the item would shrink relative to other items.

flex-basis: The initial length of the flex item.

flex: Shorthand property; can be used to set the flex-grow, flex-shrink, and flex-basis properties.

align-self: You can specify what alignment an item will have in the flex container using this property.

Responsive Image Gallery

We can also create responsive image galleries using the flexbox layout. The gallery will have four, two or one full-width image(s) in a row, as per the screen size allows

CSS Multiple Columns

CSS can help you put the text content in multiple columns just like the newspapers do. This makes a large amount of text more presentable and also optimizes the space usage. The multi-column layout is used for this purpose.

To achieve the multi-column layout on the web-pages, we need to know about these following properties:
column-count
column-width
column-gap
column-rule-style
column-rule-width
column-rule-color
column-span

We will now study all these properties one by one.

column-count

It is the count as to how many columns the element is going to be divided into.

column-gap

For a presentable display, the different columns need to have a visible gap. This can be achieved by providing a suitable value to the column-gap property.

column-rule-style

The rule here is the separating lines for the different columns. We can style the column-rule with different properties. The column-rule-style specifies the style of the rule that we’ll use.

column-rule-width

The width of the columns rule can be altered using the column-rule-width property. You can specify the value according to how thick you want the rule to be.

column-rule-color

The color of the column rule is generally kept in a shade darker than the background color. The property column-rule-color helps us to set the color for the rule.

All the column-rule=* properties can be set using the short and column-rule. The values can be in any order for different properties.

column-span

An element can span for multiple columns and this is decided with the help of column-span property. Generally, we use this property for the text elements only to set the extent to which they can expand over the columns.

column-width

We can set the width of the columns using this property. An appropriate size for the column-width is essential to make the content attractive and presentable and also ensuring proper usage of the horizontal space.

CSS Styling Images

CSS helps us to style the image elements using various styling properties. We can crop them, add hover effects add animations and transitions etc.

Here are some of the popular styling effects we can put on images using CSS

Image Borders

Changing the border properties of the image can help us crop or display it in certain shapes.

For example is you want to display a rounded-image, you can use the border-radius property to crop out a round part.

Similarly, you can display different image thumbnails using proper border values.

Image with border

Run

Image Border with padding

Run

Image border radius

Round Image

Run

Round Image border

Run

Responsive Images

Like any other element, images can also be made responsive to the change in the browser window/ screen.

We can use the max-width, width and height properties to achieve this effect. The image will then shrink or grow as per the screen size.

setting width to 100% will make image responsive.

Run

Image Centre

Setting the left and right margin to auto, also set the display block. Then the element can be centrally aligned.

Run

Center Image inside a div

Run

Image Opacity /Transparency

The transparency of the image can be altered to specify a certain state or for mere styling.

The value of the opacity property can be set from 0.0 to 1.0 for this purpose. Where 0.0 is fully transparent and 1.0 is complete opaque.

Run

Text

Text on the image can tell something about the image or even prompt the user to take any action on the image like double-click or hovering the pointer.

Text on the image

Run

Filters

Built in CSS filters to add visual effect to the images

Hover

We can make style changes for the mouse hover. You can set the .overlay for this purpose.

On hover set image opacity of 0.8 as below

Run

Flipping

Using the scaleX(-1) value we can flip the image

Image Gallery

Not only a single image, we can display a whole gallery of images on the web-page. We can also make the gallery responsive so that it re-arranges the images to fit the screen/window size.

Beautiful images from

Image Photo by Grahame Jenkins on Unsplash

CSS Animations

CSS enables you to apply animated effects to the HTML elements without using any JavaScript or Flash. Basically, the element will change from one state to other gradually giving an effect of aliveness.

There are 3 main components to provide the desired animation effect on an element:

@keyframes: This rule defines the desired animation effect like change in color or change in position etc. Every @keyframes rule is given a name which is later used to use the animation effect for any element. A typical example for @keyframes rule:

Here, we have defined an animation rule that will change the background color of an element from pink to orange. Instead of from and to you can also use the completion percentage from 0% to 100%. In fact, you can set changes for different percentage values to enhance the animation effect.

animation-name: This CSS property specifies name of the @keyframe rule that is to be applied for the element. For example, to apply above animation rule, we’ll use the name “animate01”.

animation-duration: The time for which the animation would take place. If no value is given then the value by default 0 and no animation is visible.

animation-delay

The animation-delay property can be used to add a delay before the animation starts. A positive value to this property specifies the obvious delay while a negative value starts the animation as if it was running for the said time.

For instance, if the animation-duration is 4s and you set an animation-delay of -1s the animation will start as if it is been running for past 1s (~25% complete already).

animation-iteration

It specifies the count of times the animation should run.

animation-direction

Whether the element should play forwards, backwards or in alternate cycles, can be set using this property. The permissible values are:
normal – forward direction
reverse – backward direction
alternate – forwards first, then backwards
alternate-reverse – backwards first, then forwards

animation-timing-function

Used to specify the speed curve of the animation
Specify the fill-mode For an Animation

animation-fill-mode

This can be used to style the element before the animation start and/or after it ends.

CSS Transitions

Transition is the change from one point to other over a duration of time. CSS uses the transition property to change the values of other property smoothly over a specified time period.

There are two things that you need to specify for the transition property:

The property that you need to add the transition effect to
The duration for which you want the transition to expand. (default value 0)

For example, let’s say there is an image on your web page with current width 20px. You want the width to change to 100px every time you hover the mouse over the image. But instead of this happening immediately, you want the change to take place over, say, 2 seconds.

This is where transition comes in play. You can set the transition value for “img” to “width 2s” which means that the transition will take place on the width property for the duration of 2 seconds.

Multiple Properties

To make the transition effect on multiple properties, you can set the property-duration pair separated by commas.

transition-time-funtion

The speed curve of the transition can be set using the transition-time-function. In simpler words, how steady the transition would take place on the given duration is set using this property. The permissible values for these are:
ease – Slow at start and end and fast in between
linear – The same speed right from the start up till the end
ease-in – Slow only at start
ease-out – Slow only at end
ease-in-out – Similar to the ease value
cubic-bezier(n,n,n,n) – Uses the cubic-bezier function to specify the speed-curve manually.

Transition-delay

This property specifies a delay before the transition starts to effect. The value can be given in seconds.
The transition can also be used along with transformation. With all the different property-duration pairs we can specify the “transform duration” as well.

CSS Shadows and Text Effects

CSS provide properties namely text-shadow and box-shadow to add shadow to text and to elements respectively.

Both have been introduced in CSS3.

The default value of the properties is none that means no shadow.

CSS Text Shadow

As the name suggests, the text-shadow CSS property adds shadows to text. This property is animatable and inherited. The supporting browsers are Chrome 4.0, IE 10.0, Firefox 3.5, Safari 4.0 and Opera 9.6

Syntax

where h-shadow is the position of the horizontal shadow, v-shadow is the position of the vertical shadow, color-shadow can have values color name/code, none(No shadow), initial(set a CSS property to its default value), inherit (inherits from its parent element).
Text Shadow example is as below

The default value for blur-radius is 0 and color-shadow will be the same as the text color.

CSS Box Shadow

This property adds shadows to different <div> elements. This property is animatable and can’t be inherited.

The supporting browsers are Chrome 10.0, IE 9.0, Firefox 4.0, Safari 5.1 and Opera 10.5

Syntax

where h-shadow is the position of the horizontal shadow, v-shadow is the position of the vertical shadow, color-shadow can have values color name/code, inset(inner shadow), initial(set a CSS property to its default value), inherit (inherits from its parent element) and spread-radius is the size of the shadow.

Box Shadow example is as below

The default value for blur-radius and spread-radius is 0. The default color-shadow will be the same as the text color.

With the increase in blur-radius, the shadow will become more blurred.

The positive increase in spread-radius increases the size of the shadow and negative increase will decrease the size of the shadow.

The positive values of h-shadow and v-shadow make the shadow on the right and below the text respectively whereas the negative values represent left and above.

For multiple-shadows, a comma-separated list of shadows can be added to the text/element. In this case, the shadows are applied from front to back.

CSS Gradients

CSS gradients are a special type of images made of a smooth transition between two or more colors progressively. These are generated dynamically and hence replacing the need for traditional raster image files.
There are two types of gradients:

Linear Gradients

The linear-gradient() CSS function creates a transition along a straight line.
The repeating-linear-gradient() function is used to repeat linear gradients.

Syntax

where <side-or-corner> can have values left, right, top, bottom or the combination(eg. bottom right) to make it diagonal which are equivalent to the angles 270º, 90º, 0º, 180º and <color-stop> is the list of color stops with an optional stop position in percentage or length along the gradient axis.
By default, the linear gradient is from top to bottom.

Radial Gradients

The radial-gradient() CSS function creates a transition radiating from an origin which can be a circle or ellipse.

Syntax

where <extent-keyword> can have values closest-side, farthest-side, closest-corner, farthest-corner and <color-stop> is the list of color stops with an optional stop position in percentage or length along the gradient axis. A 0% or a 0 length means the center of the gradient whereas 100% is the intersection of the ending shape with the virtual gradient ray. <color-stop> should have at least two color stops (start-color and last-color).

By default, the radial gradient is evenly spaced, the shape is an ellipse, the position is center and the extent-keyword is farthest-corner.

The repeating-radial-gradient() function is used to repeat radial gradient.

To create fading effects, CSS gradients provides transparency which can be added by the rgba() function to define the color stops. The last parameter in the rgba() function is used to define transparency whose value ranges from 0 (full transparency) to 1 (no transparency).