Css

Backgrounds
CSS background properties:

background-color
background-image
background-repeat
background-attachment
background-position
background-image: url("paper.gif");
background-repeat: no-repeat;
background-repeat: repeat-x;
background-position: right top;
background: #ffffff url("img_tree.png") no-repeat right top;
Text
text-decoration: none;
text-align: justify;
text-transform: uppercase;
text-transform: capitalize;
text-indent: 50px; DA UVUCE TEKST
letter-spacing: 3px; RAZMAK PO HORIZONTALI

line-height: 0.8; RAZMAK PO VERTIKALI
FONT-SIZE: 1em is equal to the current font size. The default text size in browsers is
16px.
font-weight: lighter;
Icons
Font Awesome Icons
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.6.3/css/font-awesome.min.css">
<i class="fa fa-cloud"></i>
<i class="glyphicon glyphicon-cloud"></i>
ZA BOOTSTRAP
Google Icons
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<i class="material-icons">cloud</i>
Links
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
vazno: a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective! a:active MUST come after a:hover
Display
The default display value for most elements is block or inline.
display: none; > ne postoji element

visibility:hidden; > The element will be hidden, but still affect the layout (ne vidi se
element ali prostor koji on zauzima se vidi (prazan prostor) )
display: inline;
primer:
li {
display: inline;
}
> uredjuje sve li u listi (horizontalno)
<body>
<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
Position
static
relative > is positioned relative to its normal position.
fixed
absolute > pozicionira se u odnosu na relative parent
primer:
div.relative {
> parent
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
> child
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
z-index > z-index of -1, it will be placed behind the text
primer2:
pozicioniranje teksta na ekranu (centar, left, bottom)
HTML
<div class="container">
<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="center">Centered</div>
</div>
CSS
.container {
position: relative;
}
> PRVO CONTAINER DA BUDE RELATIVE
.center {
position: absolute; > TEKST KOJI HOCEMO DA CENTRIRAMO, MORA ABSOLUTE
left: 0;
> LEVO 0 JER CEMO DA POZICIONIRAMO DIV KOJI DRZI TEKST
top: 50%;
> 50% POLA VERTIKALE EKRANA
width: 100%;
text-align: center; > POSTO JE TO DIV, DA BI TEKST BIO CENTRIRAN PO SREDINI DIVA
font-size: 18px;
}
img {
> POZADINA (SLIKA), MORA WIDTH 100% I HEIGHT AUTO
width: 100%;
height: auto;
opacity: 0.3;
}
Overflow
visible - Default. The overflow is not clipped. It renders outside the element's
box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, but a scrollbar is added to see the rest of the
content
auto - If overflow is clipped, a scrollbar should be added to see the rest of the
content
overflow > KADA TEKST PREMASUJE VELICINU DIVA (VERTIKALNU) . ODNOSI SE NA

PROSTOR KOJI DIV NE MOZE DA PRIKAZE
Clear
float: right;
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
}
.div4 {
border: 1px solid red;
clear: left; < prebacuje se u novi red u odnosu na element koji se nalazi sa
njegove leve strane
}
Float
html
<div class="clearfix">
<img class="img2" src="w3css.gif" alt="W3Schools.com" width="100"
height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet,
nulla et dictum
interdum...
</div>
CSS
div {
border: 3px solid #73AD21; <border zeleni oko diva (parent)
}
.img1 {
float: right;
}
> pozicionira sliku w3school desno
.clearfix {
overflow: auto; > ako je slika veca od parent diva, obuhvata oba elementa
(uokviruje oba elementa u jedan div)
}
Inline-block
inline-block elements are like inline elements but they can have a width and a height.
<div class="floating-box">Floating box</div>

Css>
.floating-box {
display: inline-block; >poredja ih sleva na desno jedan do drugog, podjednako
rastojanje do kraja containera
width: 150px;
height: 75px;
margin: 10px;
}
Centriranje slike
img {
display: block; > jer mora da obelezi element
margin: auto; > margina automatska sa leve i desne strane (centrira e)
width: 40%;
}
Centriranje teksta vertikalno

1. Line-height
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
Css>
.center {
line-height: 200px;
> line-heigth i heigth diva moraju da budu isti
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
2.
Center Vertically - Using position &

transform
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
Css>
.center {
height: 200px;
position: relative; > parent relative i dimenzije boxa(height)
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Jednostavan tooltip
<div>Hover over me to show the p element
<p>Tada! Here I am!</p>
</div>
Css>
p{
display: none;
> da se ne vidi, tj uopste da se izgubi element
background-color: yellow;
padding: 20px;
}
div:hover p {
> hover na div, da izbaci block (tj paragraf p kojii je zut_
display: block;
}
Navigation Bar (navigacija)

prvo se napravi lista:
<ul>
<li><a
<li><a
<li><a
<li><a
</ul>
href="default.asp">Home</a></li>
href="news.asp">News</a></li>
href="contact.asp">Contact</a></li>
href="about.asp">About</a></li>
let's remove the bullets and the margins and padding from the list:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline; > da ih poredja po horizontali
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
GALERIJA SLIKA
<div class="img">
<a target="_blank" href="fjords.jpg">
<img src="fjords.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="forest.jpg">
<img src="forest.jpg" alt="Forest" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
.........
CSS>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
CSS3
Backgrounds
background-size
background-origin
background-clip
background-size are contain and cover.
background-size are contain and cover.
Background-origin >
border-box - the background image starts from the upper left corner of the border
padding-box - (default) the background image starts from the upper left
corner of the padding edge
content-box - the background image starts from the upper left corner of the
content
BOX-SHADOW CARD
<div class="card">
> GLAVNI DIV (CONTAINER) - CARD
<div class="header">
> ZELENI DIV SA BROJEM 1
<h1>1</h1>
</div>
<p>January 1, 2016</p>
</div>
</div>
> DONJI DIV SA DATUMOM
CSS>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}
div.container {
padding: 10px;
}
PRIMER2: SA SLIKOM CE BITI >
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<p>Hardanger, Norway</p>
</div>
</div>
2D Transformacije
In this chapter you will learn about the following 2D transformation methods:
translate()
rotate()
scale()
skewX()
skewY()
matrix()
Translate
pomera element
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px); /* Standard syntax */
Scale
povecava element ili smanjuje
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari */
transform: scale(0.5, 0.5);
Transition
CSS3 transitions omogucava da promenite velicinu elementa postepeno sa
kasnjenjem
To create a transition effect, you must specify two things:

the CSS property you want to add an effect to
the duration of the effect
PRIMER: hocemo da hover na div, promenimo tj povecamo width
<div></div>
css>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
> za 2s da zavrsi transition
div:hover {
width: 300px;
> nova vrednost width za div (sa 100px na 300px se menja)
transition-timing-function
transition-timing-function: ease;}
Responsive card (images)

<img src="rock600x400.jpg" alt="Norway" style="width:100%">

<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
<img src="lights600x400.jpg" alt="Norway" style="width:100%">
<p>Northern Lights in Norway</p>
</div>
</div>
css>
div.polaroid {
>div card (glavni blok)
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;

}
Flexbox
< bitno
A flex container is declared by setting the display property of an element to either:

- flex (rendered as a block)
- inline-flex(rendered as inline).
<div class="flex-container">
<div class="flex-item">flex item 1</div>

</div>
css>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
- kako da se centriraju elementi, rastojanje izmedju njih, sa koje strane >
The justify-content property horizontally aligns the flexible container's items when
the items do not use all available space on the main-axis.
The possible values are as follows:
flex-start - Default value. Items are positioned at the beginning of the

container
flex-end - Items are positioned at the end of the container
center - Items are positioned at the center of the container
space-between - Items are positioned with space between the lines
space-around - Items are positioned with space before, between, and after
the line
primer po sredini align horizontalno
<div class="flex-container">
</div>
css>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
>
>
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}

Css

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Css

Hochgeladen von

Copyright:

Verfügbare Formate

Backgrounds

CSS background properties:

background: #ffffff url("img_tree.png") no-repeat right top;

text-indent: 50px; DA UVUCE TEKST

letter-spacing: 3px; RAZMAK PO HORIZONTALI

<i class="fa fa-cloud"></i>

<i class="glyphicon glyphicon-cloud"></i>

display: none; > ne postoji element

> uredjuje sve li u listi (horizontalno)

z-index > z-index of -1, it will be placed behind the text

pozicioniranje teksta na ekranu (centar, left, bottom)

> PRVO CONTAINER DA BUDE RELATIVE

overflow > KADA TEKST PREMASUJE VELICINU DIVA (VERTIKALNU) . ODNOSI SE NA

> pozicionira sliku w3school desno

<div class="floating-box">Floating box</div>

Centriranje teksta vertikalno

> line-heigth i heigth diva moraju da budu isti

Center Vertically - Using position &

> da se ne vidi, tj uopste da se izgubi element

> hover na div, da izbaci block (tj paragraf p kojii je zut_

Navigation Bar (navigacija)

background-size are contain and cover.

background-size are contain and cover.

> GLAVNI DIV (CONTAINER) - CARD

> ZELENI DIV SA BROJEM 1

> DONJI DIV SA DATUMOM

PRIMER2: SA SLIKOM CE BITI >

To create a transition effect, you must specify two things:

PRIMER: hocemo da hover na div, promenimo tj povecamo width

> za 2s da zavrsi transition

> nova vrednost width za div (sa 100px na 300px se menja)

Responsive card (images)

<img src="rock600x400.jpg" alt="Norway" style="width:100%">

>div card (glavni blok)

padding: 10px 20px;

A flex container is declared by setting the display property of an element to either:

<div class="flex-item">flex item 3</div>

- kako da se centriraju elementi, rastojanje izmedju njih, sa koje strane >

flex-start - Default value. Items are positioned at the beginning of the

primer po sredini align horizontalno

Das könnte Ihnen auch gefallen