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

–

#css3