CSS snippets repository to avoid reinventing the wheel.
Note: The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
|[attr~="val"]||[title~="flower"]||selects element with an attribute val containing specified (whole) word|
|[attr|="val"]||[class|="top"]||selects el with an attribute starting with word (whole word): top-gun|
|[attr^="val"]||[class^="top"]||selects el with an attribute starting with a string (not whole word): topgun|
|[attr$="val"]||[class$="top"]||selects el with an attribute ending with a string (not a whole word ): guntop|
|[attr*="val"]||[class*="top"]||selects el containing specified string (not a whole word): gutopgun|
Pseudo-elements are not pseudo-classes. In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element. More on pseudo-elements at [MDN][mdn-pseudoel.
<q> for short quotation
Here is an example of using ::before and ::after pseudo-elements:
Open and closed quotes.
In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.
- :first-child, :nth-child(), [:nth-last-child()] :last-child
- :only-child (represents an element without any siblings)
CSS3 Rounded Corners
Here is for the background.
This example is for the border.
This example is for a background image.
CSS3 Shadow Property
At example above (CSS3 Rounded Corners) you can clearly see shadowed boxes. This is how box-shadow property works. The text-shadow property is applied to each h1,h2 headers.
The subject is elaborated at W3Schools.
Circular Images with
CSS3 Border Images
- At Google Images there are tons of background images.
- Border Image Generator
- W3Schools Border Images
CSS3 Multiple Backgrounds
More details on CSS3 backgrounds may be found at W3Schools.
Multiple options are available. A lot of examples can be found at W3Schools.
RGBa Browser Support
RGBa is a way to declare a color in CSS that includes alpha transparency support.
By setting the CSS opacity property, we can adjust the transparency of the entire element and its contents. RGBa colour gives us something different – the ability to control the opacity of the individual colours rather than the entire element.
It looks like this:
Transformations and Transitions
The example above uses HTML5
CSS3 Transitions are not transformations. Using them together adds dynamic feeling to a page.
CSS Style Guides
- CSS Tricks - a lot of great content.
- CSS W3 Schools - CSS tutorial, a lot of editable examples.
- Learn Layout - CSS layouts explained.
- CSS color names
- Border Image Generator
- MDN CSS Getting Started and CSS Reference.
- Style Guide
- Syntactically Awesome StyleSheets, and its reference.
- Sass Playground - check how your CSS looks like.
- Sass vs Less, Less wiki
- Using Sass with Jekyll
- Web Layouts with Susy
- From CSS to Sass in WordPress
- Responsive Typography
- Breaking Free from Bootstrap