CSS

CSS snippets repository to avoid reinventing the wheel.

side notes

p.note {
    border-style: solid;
    border-width: 1px;
    border-left-width: 15px;
    padding: 10px;
}

Note: The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Attributes Selection

http://www.w3schools.com/css/css_attribute_selectors.asp

CSS3 Pseudo-elements

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.

<q> for short quotation

Here is an example of using ::before and ::after pseudo-elements:

/* open and closing quotes like in Polish language */
Q               { quotes: "\201E" "\201D" }
Q::before       { content: open-quote }
Q::after        { content: close-quote }

/* quotes like << >> */
Q1               { quotes: "\00AB" "\00BB" }
Q1::before       { content: open-quote }
Q1::after        { content: close-quote }

And results:

Open and closed quotes.

Using an extra tag (Q1) here we have an << >> quotes.

CSS3 Pseudo-classes

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)
• :not()
• :out-of-range
• :root

CSS3 Rounded Corners

With CSS3, you can give any element “rounded corner”, by using the border-radius property. Radius from CSS Reference. Also some border-radius tricks.

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

Circular Images with border-radius.

CSS3 Backgrounds

CSS3 Border Images

1. At Google Images there are tons of background images.
2. Border Image Generator
3. W3Schools Border Images

CSS3 Multiple Backgrounds

More details on CSS3 backgrounds may be found at W3Schools.

CSS3 Gradients

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:

#rgbatest {
  color: rgba(255,255,255,.8);
  background-color: rgba(142,213,87,.3);
}
#rgbatest:hover {
  color: rgba(255,255,255,1);
  background-color: rgba(142,213,87,.6);
}

• An article about RGBa Browser Support.
• RGBa Generator
• RGBa vs opacity
• RGBA color space

Transformations and Transitions

CSS3 Transformations

The example above uses HTML5 input type="range", and W3 wiki describes all its attributes.

W3Schools describes CSS3 2D and 3D transformations.

CSS3 Transitions

CSS3 Transitions are not transformations. Using them together adds dynamic feeling to a page.

CSS Style Guides

1. Github
2. MDO Code Guide

CSS

1. CSS Tricks - a lot of great content.
2. CSS W3 Schools - CSS tutorial, a lot of editable examples.
3. Learn Layout - CSS layouts explained.
4. CSS color names
5. Border Image Generator
6. MDN CSS Getting Started and CSS Reference.
7. Style Guide

Sass

1. Syntactically Awesome StyleSheets, and its reference.
2. Sass Playground - check how your CSS looks like.
3. Sass vs Less, Less wiki
4. Using Sass with Jekyll
5. Web Layouts with Susy
6. From CSS to Sass in WordPress
7. Responsive Typography
8. Breaking Free from Bootstrap

Bootstraps

1. Bootstrap
2. W3CSS
3. Nice bootstrap list from learnlayout.com.

Links

1. CSS Generators and Hints
2. Table Generator