Creative Link Effects
An inspirational collection of experimental link effects mostly using transitions on pseudo-elements. View demo Download source Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you...
Website Layout Design Part 1
Website Layout Design Part 1
CSS Tutorial
What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple Web pages all at once External Style Sheets are stored in CSS files Why Use CSS? CSS...
HTML Tutorial
What is HTML? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content HTML Tags HTML tags are keywords (tag names) surrounded by angle...
Attr Selector
CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attribute. Example CSS [attribute="value"] Selector The [attribute="value"] selector is used to select elements with a specified attribute and value. Example CSS [attribute~="value"] Selector The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. Example CSS...
Display
The display property is the most important CSS property for controlling layout. The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
Image Gallery
CSS can be used to create an image gallery. The following image gallery is created with CSS: Example
Pseudo-elements
What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element Syntax The syntax of pseudo-elements: selector::pseudo-element { property:value;} Selector Example Example description ::after p::after...
Pseudo-classes
What are Pseudo-classes? A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Syntax The syntax of pseudo-classes: selector:pseudo-class { property:value;} Selector Example Example description :active a:active Selects the active link...
Left and Right Align – Using float
Another method of aligning elements is to use the float property: Tip: When aligning elements with float, always define margin and padding for the <body> element. This is to avoid visual differences in different browsers.