css3

css3 – Cascading Style Sheets

www.css3.info

 

• border image – tworzenie ramki z obrazka
• box shadow – tworzenie cieni (generator: http://css3generator.com/, http://www.cssmatic.com/box-shadow)
• multiple backgrounds – wyświetlenie równych obrazów tła – różne pozycjonowanie tła złożonego z wielu obrazów
• rzeczywiste nieprzeźroczystości
• text shadow – cienie na tekście (generator: http://css3gen.com/text-shadow/)
• podział na moduły
• nowe selektory, pseudoklasy, pseudoelementy
• nowe style i właściwości

 

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

 

przykłady:

• box-decoration-break:
  • clone dwa elementy dostają ten sam styl jak np padding left i right
• perspective: 1500px
• backface-visibility: hidden
• background-image: linear-gradient(to bottom right, $colorSecondaryLight, $colorSecondaryDark)
• background-blend-mode: screen
• clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%)
• pointer-events: none
• text-owerflow: ellipsis
• shape-outside: circle(50%)
• filter: blur(3px) brightness(80%)
  • brightness – poniżej 100% z ciemnia obraz, powyżej 100% rozjaśnia
• object-fit: cover
• hyphens: auto
• columns:
  • column-count: 2
  • column-gap: 4rem
  • column-rule: 1px solid $colorLine
• -webkit-backdrop-filter: blur(10px) – bluruje background pod popupem (na tą chwilę obsługiwane tylko przez Safari)
• @support ()

 

  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:

• -webkit- (-webkit-box-shadow:) – Chrome, Safari
• -moz- (-moz-box-shadow:) -Mozilla Firefox
• -o- (-o-box-shadow:) – Opera

 

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:

• CSSOM View
• Selectors
• Media Queries
• Marquee
• Image Values
• Flexible Box Layout
• 3D Transforms
• 2D Transforms
• Advenced layout
• Animations
• Attribute Syntax
• Syntax
• Aural Style Sheets
• Speech
• Backgrounds and Borders
• Basic User Interfaces
• Box Model
• Cascading and Inheritance
• Color
• Fonts
• Generated Contect for Paged Media
• Generated and Replaced Content
• Grid Positioning
• Hyperlink Presentation
• Introduction
• Line Layout
• Lists
• Maths
• Multi Column Layout
• Namespaces
• Object Model
• Paged Media
• Positioning
• Presentation Levels
• reader Media Types
• Ruby
• Scoping
• Tables
• Text
• Text Layout
• Transitions
• Values and Units
• Web Fonts

 

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:

• p[title] – wszystkie zawierające jakąkolwiek wartość atrybutu
• p[title=orange] – zawierające podaną wartość
• p[title^=”hea”], p[title$=”ine”], p[title*=”headline”] – dopasowanie ciągu znaków, więcej o metaznakach
• a[rel=”external”]
• a[href]
• a:not([href])
• a[href^=”http:”]
• a[href$=”.png”]
• a[href*=”users”]
• img[width*=”200″;] {border: dotted 2px red}
• [alt=”logo”] – każdy img z altem ustawionym na logo

 

Pseudoklasy :

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

 

pseudoklasy odsyłaczy:

• :link – element a z atrybutem href
• :visited
• :hover
• :active – najechanie kursorem myszy, wciśnięcie przycisku ale nie zwolnienie
• :focus – wyświetlany link
• :target – zmiana elementu będącego kotwicą (jako a name=”myTarget”) po kliknięciu linku kierującego do niego

 

pseudoklasa językowa

• :lang

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

• :enabled – input[type=”text”]:enabled{style}
• :disabled
• :checked
• :valid
• :invalid
• :in-range
• :out-of-range

 

pseudoklasy strukturalne

odwołanie do struktury dokumentu html

• :root – 'korzeń’ struktury, element html, działa na cały dokument
• :nth-child() – element posiadający przed sobą określoną liczbę rodzeństwa (nie musi być tego samego typu co formatowany element) w strukturze dokumentu, w () – słowo kluczowe, formuła
  • (3) – trzeci element
  • odd – nieparzyste elementy
  • even – parzyste elementy
  • aN+B
    • aN – wartość skoku
    • B – punkt rozpoczęcia
• :nth-last-child() – element od końca listy
• :nth-of-type() – element określonego typu mający przed sobą określoną liczbę rodzeństwa swojego typu
• :nth-last-of-type() – element określonego typu liczony od tyłu listy
• :first-child – pierwsze dziecko wybranego elementu
• :last-child – ostatnie dziecko wybranego elementu
• :first-of-type – pierwszy element określonego typu z listy mającej wspólnego rodzica
• :last-of-type – ostatni element określonego typu z listy mającej wspólnego rodzica
• :only-child – pierwsze i jedyne dziecko rodzica
• :only-of-type – pierwsze i jedyne dziecko określonego typu
• :empty – element który nie posiada dzieci i nie zawiera elementów w sobie
• :not() – element który nie jest argumentem (selektorem) podanym w nawiasie, bez konieczności podania selektora poprzedzającego pseudoklase -> :not(p)

 

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="https://webscene.pl">WebScene</a> Baza wiedzy o WordPress, HTML5, CSS3, jQuery.</p>

daje efekt:

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

 

Pseudoelementy

• :first-letter
• :first-line
• :after – musi zawierać podany content=””
• :before – musi zawierać podany content=””
• ::selection – zaznaczony przez użytkownika tekst, dla Firefox ::-moz-selection

::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

• they can be manipulated in JS
• edit in devTools
• use in code function
• they cascade and they are inherited
• they have to be defined inside a scope, within declaration block
• :root – sudoclass – global parent element, css variables they will be accessible throught the entire element (kompilacja w sass – aby przeszła poprawnie \:root)

: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))
}

–