Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS (ANIMACJE keyframes name { from {} to {} } (animation-timing…
CSS
ANIMACJE
keyframes
name {
from {}
to {}
}
animation-timing-function: steps(5)
animation-name: szerokość
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
div:hover {animation-play-state: paused;
p {color: red; font-size: 24px;} - reguła
p - selektor
{color: red;} - deklaracja reguły
color - właściwość
red - wartość
LAYOUTS
html {
box-sizing: border-box;
}
,
:before, *:afrer {
box-sizing: inherit;
}
CZYSZCZENIE FLOATÓW
do rodzica dodać -
overflow: auto (hidden); width: 100%;
(FLOATY DO ELEMENTÓW BLOCKOWYCH)
clear: left;
- the left side of the element will not touch any other element within the same containing element
(it will move below any floating elements on the left side of the page)
Object Oriented CSS
traktowanie elementów strony jako obiektów (obiekt jako kawałek kodu HTML wraz z CSS i javascript)
główną motywacją tego podejścia jest zwiększenie re-używalności kodu
aby uczynić CSS bardziej modularnym
dwie podstawowe reguły
separacja struktury od stylu
tworzenie najpierw klas bardziej globalnych a później precyzowanie stylu (btn btn-cancel)
separacja kontenerów i zawartości
obiekt powinien wyglądać tak samo niezależnie w jakim kontenerze go umieściliśmy
<link href="style.css" type="text/css" rel="stylesheet">
Style na dany element można dodawać:
w HTML w tagu <p style="color: red;">, ten styl działa w pierwszej kolejności, "nadpisując" wszystkie inne,
a na końcu zadziałają style z pliku CSS.
font-weight: bold; 100-900;
a {text-decoration: none;}
.my-class {border: 10px solid black;}
border-radius: 5px; 3%;
list-style-type: circle, disc, square; decimal, upper-roman
Serwer systemu nazw domen (DNS - Domain Name System) informuje przeglądarkę jak odnaleźć daną witrynę
IP - nr tel. do danego komp., serwera
{ text-transform: uppercase;}
{ object-fit: cover; }
elementy
blokowe
: p, h1, div, ul, li
elementy
inline
: (b, em, strong) img, a, span (to create navigation bar)
elementy
inline-block
- causes the elements to behave like an inline element, but retain the features of a block-level element
div {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
{ transition: the CSS property you want to add an effect to
the duration of the effect
transition-timing-function: linear, ease, ease-in, ease-out; }
a:link, a:visited, a:hover - link nieodwiedzony/odwiedzony/pod kursorem
p:first-chind - tylko pierwszy w kolejności
p:nth-child(2) - second child of its parent element
p:nth-child(3) - trzeci w kolejności
element {
clear: both; - move below any floating elements
}
Using Media Queries with External Stylesheets
<link rel='stylesheet' media='only screen and (min-width: 320px) and (max-width: 568px)' href='mobile.css'>
<link rel='stylesheet' media='only screen and (min-width: 768px) and (max-width: 980px)' href='tablet.css'>
KOLORY
nazwy kolorów
kody szesnastkowe (hexadecimal values)
RGB, RGBA
HSL, HSLA (0-360, 0-100%, 0-100% (50), 0-1)
font-face
{
font-family: 'ChunkFiveRegular';
src: url('fonts/chunkfiveve.eot');}
h1, h2 {
font-family: ChunkFiveRegular, Georgia, serif;}
h1 {
text-indent: -9999px;
}
WYŚRODKOWYWANIE
margin: auto;
- an element is centered relative to its container,
a width must be set
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
(flex-direction: column;)
navigation
:
Gdy ustalona szerokość (px)
display: inline-block;
text-align: center;
line-height: 0;
centered circle
{
height: 100px;
width: 100px;
line-height: 100px;
border-radius: 50%;
margin: 0 auto;
}
background:
background: url('animacja/1.png') no-repeat, url('animacja/2.png') no-repeat;
background-size: szerokość wysokość; (auto 15% - dopasuj szerokość, 15% wysokości,)
background-position: top 20% left 5%, ...;
background-position: 50% 50%; - wyśrodkowanie tła w pionie i poziomie
background-repeat: repeat-y;
background-position: right center; (3 by 3 grid)
background: #fff url('img/bg.jpg') no-repeat top right;
background-attachment: fixed;
background-image: -webkit-linear-gradient(#666CCC, #BC2431);
background-size: cover;
IMAGE - FULL WINDOW
:
background-image: url('img/bg.jpg') center;
height: 100vh;
width: 100vw;
background-size: cover;
W POZIOMIE
element blokowy - margin: 0 auto;
element liniowy - (rodzic)div {text-align: center;}
img
- to center make it a block and set margin to auto
FLEXBOX
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
W PIONIE
p height = line-height - tekst
UKRYWANIE ELEMENTÓW
:
display: none;
- element removed from web page
visibility: hidden;
- an element won't be visible on the web page but the space reserved for it will
ZMIANA WYGLĄDU KURSORA
a {
cursor: move;
}
przy display: inline-block występują przerwy między elementami nawigacji
section#one - element section który ma identyfikator one
section #one - element o id=one który znajduje się w section
-#three * p - wszyscy p potomkowie elementu o id=three z wyłączeniem dzieci
-#three h2+div - wybiera div który jest bratem (bezpośrednio po h2) elementu h2 i znajduje się w id=three
-
#button:hover+#dark
- wybieramy element #dark który jest bratem elementu #button w momencie najechania na niego
-# . div - złoto, srebro, brąz
height: 100vh; (view height)
transition: któryElement jakDługo wJakimTempie
sprite
- jeden obraz jest używany do wyświetlania kilku różnych elementów interfejsu
UNITS
1px represents 1/72nd of an inch
1em is equal to the default font size on whatever screen the user is using
is equal to the width of the letter m (change the size of text relative to the parent element's size of text)
1 rem
-
root em
, checks the root element (<html> tag)
% - the default size of text in web browsers is 16px
line-height
word-spacing - default is 0.25em
letter-spacing (kerning)
font-weight: bold;
font-style: italic;
text-transform: uppercase;
text-align: center;
overflow: scroll;
Width and height dims can be set using one of three units of measurement :
px, em, persentage
BORDERS
border: 1px solid rgba(0, 0, 0, .3);
border-width (border-radius): 3px 2px 1px 2px;
border-left-width: 4px;
padding-top (margin-top): 10px;
display: none;
- element removed from web page
visibility: hidden;
- an element won't be visible on the web page but the space reserved for it will
POSITIONING
relative
- an element is positioned relative to its default static position
absolute
- an element is positioned in relation to the first parent element it has that doesn't have position: static (all other elements on the web page ignore the element)
z-index: 1;
- not giving the z-index to other elements ensures this element will be on top of others, nie działa gdy position: static;
SIMULATING BUTTON BEING PUSHED
btn {
position: relative;
}
btn:active {
top: 2px;
}
BOOTSTRAP
<header class="container">
<div class="row">
<h1 class="col-sm-4">Skillfair</h1>
<nav class="col-sm-8 text-right">
<p>catalogue</p>
<p>newest</p>
<p>contact</p>
</nav>
</div>
</header>
.container {
width: 50%;
height: 200px;
overflow: hidden;
}
.container img {
max-width: 100%;
height: auto;
display: block;
}
media
only screen and (min-width: 320px) and (max-width: 480px) {
body {
font-size: 12px;
}
}
media
only screen and (min-resolution: 300dpi) {
}
media
only screen and (max-width: 480px), (orientation: landscape/portrait) {
}
CSS menu obcięte do okręgu
clip-path: circle (0-150% at top right)