CSS BASICSCSS Home CSS Intro CSS-to-CSS3 CSS Insert CSS Syntax CSS Inheritance CSS Comments CSS Units
SELECTORSCSS Class/Id CSS Attr Selector CSS Combination CSS Pseudo Class Form UI Pseudo Class CSS Pseudo Element
TEXT & FONTSCSS Fonts CSS Text Formatting CSS Text Decoration CSS Text Shadow CSS @fontface CSS Text Overflow CSS Links CSS Lists CSS Tables
LAYOUTSCSS Box Model CSS Display CSS Margins CSS Padding CSS Floats CSS Background CSS Images CSS Visibility CSS Positioning CSS Overflows
BORDERSCSS Borders CSS Image Borders CSS Rounded Corners CSS Drop Shadow
GRAPHICSCSS Color CSS Opacity CSS Gradients CSS Masks CSS Filters CSS Generated CSS Navigation
ANIMATIONCSS 2D-Transforms CSS Transitions CSS Matrix CSS 3D Matrix CSS & Keyframes CSS Cursors
ADV STYLESHEETSCSS Print Styles CSS @ Media CSS Flex Box CSS Multiple Columns
CSS3 ReferencesCSS3 Basic Concepts CSS3 Properties CSS3 Selectors CSS3 Values CSS3 Fonts CSS3 Colors CSS3 Browser Support CSS3 Aural Media CSS3 Paged Media
To generate contents that is physically not present in the HTML Markup
CSS Generated Content
1. CSS enables you generate content on the webpages that is physically not present in the HTML markup. The browser generates them automatically and even updates them on any change.
2. Pseudo elements like ::before and ::after can be used to add text, images , quotes, numbered sequence, create ribbons , speech bubbles, drop shadows etc.
How to insert generated content on Webpages?
1. Generated Content can be inserted on webpages using the pseudo elements ::before and ::after
2. The Generated Content Properties are:
content : Specifies the type of content to be inserted by the pseudo element
counter-increment : To create an incrementing or a decrementing numbered sequence.
counter-reset : Resets the counter to 0
quotes : To specify the type of quotation marks for generated quotes.
Inserting Text and Images using pseudo elements
1. You can insert quotes , text and images on the webpage with having them physically present in HTML markup using the property content.
2. To insert images we use the value for content property as url(), values in brackets specifies the path for image.
Example : Inserting Text and Images using pseudo elementsGive it a TRY! » Note: ::before generates content before the element and ::after generates content after the element.
Generate Content from an attribute's value
1.The content property can scan through HTML tags, search for an attribute and then display the text value of the attribute.
Example:Generate Content from an attribute's valueGive it a TRY! »
Generating Quotes using Pseudo Elements
1. The quotes property can be used to generate quotes automatically without them being physically present in the HTML markup.
2. You can even control the type of quotation symbols to be used.
Tables: Hexadecimal Quote Symbols
|\2018||‘||Left Single Quote|
|\2019||’||Right Single Quote|
|\201C||“||Left Double Quote|
|\201D||”||Right Double Quote|
|\201E||„||Double Low-9 quote|
|\00AB||»||Left Double angle Quote|
|\00BB||«||Right Double angle Quote|
Example: Generating quotes using Pseudo ElementGive it a TRY! » Note: ::before generates content before the element and ::after generates content after the element.
Seperate Counters for Each level
Three things are required to create a numbered sequence:
1. Counter Initialization using the counter-reset property
2. Counter Increment with the counter-increment property
3. And finally displaying the counter using the ::before and counter property
CSS: Seperate Counters for each levelGive it a TRY! »
Using Various Number Schemes for Generated List
1. You can have various Number Schemes using the property list-style-type within the counter() function.
Example: CSS3 Generated List Number SchemesGive it a TRY! » Note: Multiple transitions can be specified using commas
CSS: Generate Nested List with Subsection Numbers
1. To Generate a nested list with subsection numbering you need to reset the descendent counter which enables the browser restart the numbering sequence in the descendant element.
2. The function counters() (do not confuse with counter() function) is used to create counters at each level and custom numbering sequence for nested list.
3. It accepts two arguments, the counter-name and the string of literal text to act as a seperator for numbering sequence
Example: CSS3 Nested List with Subsection NumbersGive it a TRY! » Note: The default numbering system is replaced using pseudo element ::before
Create Triangle using Pseudo Element ::before and ::after
1. To create a traingle you set the width and height as zero, and a border of large width.
2. Then set different color for all the sides of border, set the opacity of any of the three border sides to 1(completely transparent).
Example : CSS3 TraingleGive it a TRY! »
CSS3 Ribbon effect using ::before and ::after pseudo element
1. To create a ribbon effect, the background of the ribbon should extend beyond the element containing ribbon.
2. Two triangles of slightly darker background are used to create an illusion of ribbon folding back using CSS3 ::before and ::after pseudo element.
Example: CSS3 Ribbon EffectGive it a TRY! »
CSS3 Comment Bubble with Pseudo Elements
1. For the Comment Bubble, the acute angled triangle at the end is created with an element with double the left-right width than the top-bottom width. And color of three sides of the border set as transparent.
2. Then a smaller triangle with background color same as the main box is superimposed on the first traingle, to create an illusion of continious border.
Example: CSS3 Comment Bubble EffectGive it a TRY! »
Create a CSS3 Speech Bubble
1. The Tail of the Speech Bubble is created by superimposing two circles(with different Z-indexes) to cut an arc, and the color of the outer circle set same as that of background.
2. The circles are positioned behind the circle by having a negative Z-index values.
Example: CSS3 Speech BubbleGive it a TRY! » Note: All distances are with reference to the top-left corner(i.e (0,0,0))
Create CSS3 Thought Bubble
1. The Thought Bubble is created by first creating the ellipse as a Main Thought Bubble, and the smaller bubbles are created by creating circular elements with thick borders.