css3

css3 – Cascading Style Sheets

www.css3.info

 

 

pełna lista: www.css3.info/preview/

 

przykłady:

 

  background-color: rgba($colorBlack, .8)
  @supports(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))
    -webkit-backdrop-filter: blur(10px)
    backdrop-filter: blur(10px)
    background-color: rgba($colorBlack, .3)

 

przedrostki z symbolem przeglądarki:

 

import styli:

@import url(„http://myWebSite.com/style/style.css”);

 

Moduły:

podział specyfikacji CSS na kilkanaście mniejszych części ściśle powiązanych z określonym zagadnieniem:

 

Selektory

 

selektor uniwersalny – (The Universal Selector)

selektor potomka – p span

selektor dziecka – p > span, (The Direct Child Selector)

selektor rodzeństwa – p + span  – styl dla elementu bezpośrednio sąsiadującego z pierwszym elementem, posiadających wspólnego rodzica, (The Adjacent Sibling Selector)

selektor ogólnego rodzeństwa – p ~ span – styl dla elementu znajdującego się (nie musi być bezpośrednio) po pierwszym elemencie, posiadających wspólnego rodzica, (The General Sibling Selector)

selektor atrybutu – np. title:

 

Pseudoklasy :

interakcje powiązane z działaniem użytkownika na stronie, stanem elementu

 

pseudoklasy odsyłaczy:

 

pseudoklasa językowa

p:lang(en){color:blue;}
p:lang(de){color:red;}

<p lang="en">How are you</p>
<p lang="de">Wie geht es dir</p>

 

pseudoklasy formularzy

 

pseudoklasy strukturalne

odwołanie do struktury dokumentu html

 

ul > li:nth-child(-n+7) { color: red; }
nth-child(3n+1):nth-child(even)

użycie:


a:after {
content: " (" attr(href) ")";
}

<p><a href="http://webscene.pl">WebScene</a> Baza wiedzy o WordPress, HTML5, CSS3, jQuery.</p>

daje efekt:

WebScene (http://webscene.pl) Baza wiedzy o WordPress, HTML5, CSS3, jQuery.

 

Pseudoelementy


::selection{
	background: #fedb03;
	color: #000;
}
::-moz-selection {
	background: #fedb03; /* Firefox */
	color:#000;
}

calc()

width: calc(100% – 40px);
daje nam blok, nagłówek szeroki na cały ekran ale zawsze z 20px marginu po każdej stronie.

 

 

speak: none;

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

 

css variables – css custom properties


:root {
  --color-primary: #eb2f64
  --color-primary-light: #ff3366
  --color-primary-dark: #ba265d
}

body {
  background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark))
}

#css3

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.