Professional Documents
Culture Documents
background-image: url("paper.gif");
background-repeat: no-repeat;
background-repeat: repeat-x;
background-position: right top;
Text
text-decoration: none;
text-align: justify;
text-transform: uppercase;
text-transform: capitalize;
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">
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: inline;
primer:
li {
display: inline;
}
<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;
border: 3px solid #73AD21;
}
primer2:
HTML
<div class="container">
<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="center">Centered</div>
</div>
CSS
.container {
position: 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
Clear
float: right;
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.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;
}
.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.
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;
border: 3px solid #73AD21;
}
Centriranje slike
img {
display: block; > jer mora da obelezi element
margin: auto; > margina automatska sa leve i desne strane (centrira e)
width: 40%;
}
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
Css>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
2.
<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;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
<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-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">
<div class="header">
<h1>1</h1>
</div>
<div class="container">
<p>January 1, 2016</p>
</div>
</div>
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;
}
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<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
<div></div>
css>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
div:hover {
width: 300px;
transition-timing-function
transition-timing-function: ease;}
<div class="polaroid">
<img src="lights600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Northern Lights in Norway</p>
</div>
</div>
css>
div.polaroid {
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;
Flexbox
< bitno
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</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;
}
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:
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</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;
}