CSS tutorial

Developer
Size
6,187 Kb
Views
52,624

How do I make an css tutorial?

What is a css tutorial? How do you make a css tutorial? This script and codes were developed by Ivan Sakoman on 12 June 2022, Sunday.

CSS tutorial Previews

CSS tutorial - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS tutorial</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--za kreiranje elemenata u našem primjeru smo uglavnom koristili div elemente, div element je block element što znaći da će svaki novi div preći u novi red, ako želimo da se nižu jedan iza drugoga moramo napisati display:inline-block;. nakon kreiranja elementa, dodjeljujemo mu klasu kako bih te elemente mogli dohvatiti u css-u i kasnije u java scripti. Element možemo dohvatiti i pomoću ID-a ali zapamtite da je ID jedinstven i nesmijemo imati 2 elementa s istim ID-em.-->
<div class="content-wrapper-1"> <div class="result-wrapper-1"> <!--Klase treba dodjeljivati promišljeno, najbolja praksa je
ta da se elementima daju klase po onome što rade u css-u npr. napravimo klasu koja će se zvati button i u css-u napišemo sva svojstva koja taj button ima te ga kasnije možemo iskoristiti na više mjesta tako da samo na ciljani element nadodamo klasu--> <div class="result-1-box-1"></div> <div class="result-1-box-2"></div> <div class="result-1-box-3"></div> <div class="result-1-box-4"></div> </div> <div class="result-1-text"> <h3>box-shadow</h3> <p>Css svojstvo koje dodaje sjenu iza elementa a njenu poziciju možemo kontrolirati vrijednostima koje unosimo.</p> <ul> <li>Prva vrijednost nam govori koliko ce sjena biti udaljena u desno od elementa, vrijednost nam može biti i negativna što znaci da ce sjena ici u lijevo od elementa.</li> <li>Druga nam govori udaljenost prema dolje, ako je vrijednost negativna sjena ce ici gore.</li> <li>Treca nam govori koliko ce rub oko elementa biti zamagljen (vrijednosti se izražavaju u pixelima)</li> </ul> </div>
</div>
<!-- primjer 2-->
<div class="content-wrapper-2"> <div class="result-wrapper-2"> <div class="result-2-box-1"></div> <div class="result-2-box-2"></div> <div class="result-2-box-3"></div> <div class="result-2-box-4"></div> <div class="result-2-box-5"></div> <div class="result-2-box-6"></div> <div class="result-2-box-7"></div> <div class="result-2-box-8"></div> </div> <div class="result-2-text"> <h3>border</h3> <p>Css svojstvo koje dodaje liniju oko bloka s kojim manipuliramo. Liniju možemo manipulirati pomoću tri vrijednosti.</p> <ul> <li>Prva nam govori debljinu linije</li> <li>Druga nam govori stil linije, primjere možemo vidjeti desno gdje sam primjenio neke od stilova.</li> <li>Treča nam govori koje boje će biti linija (rub). Boju možemo unjeti na više načina npr. Hex kod, rgb, rgba...</li> </ul> </div>
</div>
<!--Primjer 3-->
<div class="content-wrapper-3"> <div class="result-wrapper-3"> <div class="result-3-box-1">inline</div> <div class="result-3-box-2">inline</div> <!--korisitili smo 2 načina vertikalnog pozicioniranja prvi način je bio u prva dva result-box-a tako što smo element prikazali kao teble cell što znaći kao da smo napisali <td> element pa smo modli poravnati vertikalno pomoću naredbe vertical-align, a druga sva result-wrappera smo pozicionirali pomoću svojstva absolute pa smo zbog njega napravili jedan span element koji ćemo moći upravljati pomoću svojstva top, left, right i bottom--> <div class="result-3-box-3"><span>block</span></div> <div class="result-3-box-4"><span>block</span></div> </div> <div class="result-3-text"> <h3>Display</h3> <p>Css svojstvo kojim definiramo tip prikazivanja našeg elementa, tipova ima puno pa ću ja spomenuti samo one koji se najčešće koriste: </p> <ul> <li>Inline - elementi se slažu jedan pored drugoga ako u redu ima mjesta za njih</li> <li>Block - svaki element koji ima svojstvo block kreće od novog reda i možemo mu postaviti visinu i širinu</li> <li>Table - ovim svojstvom kažemo da nam se element ponaša kao tablica</li> <li>Flex - kreiramo flexbox što smo već koristili u prvom i drugom primjeru. Tim svojstvom napravimo dužinu elementa relativnu drugim elementima</li> </ul> </div>
</div>
<!--Primjer 4-->
<div class="content-wrapper-4"> <div class="result-wrapper-4"> <div class="result-4-box-1"></div> </div> <div class="result-4-text"> <h3>Position</h3> <p>Css svojstvo određuje tip metode pozicioniranja elemenata. Postoje 4 metode pozicioniranja. Nakon što smo odredili tip/metodu element možemo pozicionirati svojstvima top,bottom,left i right, ali ta svojstva različito djeluju s obzirom na tip poziciniranja.</p> <ul> <li>static - početna vrijednost svakog elementa</li> <li>relative - normalna pozicija elementa</li> <li>fixed - relativno pozicioniran na početni prikaz (viewport) što znaći da uvijek ostaje na istom mjestu kada se stranica pomiće (scroll)</li> <li>absolute - relativno pozicioniran na najbližeg pozicioniranog prethodnika</li> </ul> </div>
</div>
</body>
</html>

CSS tutorial - Script Codes CSS Codes

body { margin: 0; background-color: coral; font-family: "Lucida Console", Monaco, monospace;
}
.content-wrapper-1 { width: 100%; height: 400px; margin: 10px;
}
.content-wrapper-1 .result-wrapper-1 { float: left; height: 150px; width: 300px; display: flex; flex-direction: row; align-items: center; justify-content: space-around;
}
.content-wrapper-1 .result-wrapper-1 .result-1-box-1 { width: 50px; height: 50px; background-color: #0080FF; box-shadow: 5px 5px 5px;
}
.content-wrapper-1 .result-wrapper-1 .result-1-box-2 { width: 50px; height: 50px; background-color: #A0A0A0; box-shadow: 10px 0 10px;
}
.content-wrapper-1 .result-wrapper-1 .result-1-box-3 { width: 50px; height: 50px; background-color: #A6FF69; box-shadow: 0 15px 30px;
}
.content-wrapper-1 .result-wrapper-1 .result-1-box-4 { width: 50px; height: 50px; background-color: #FFFF66; box-shadow: 25px 25px 65px; overflow: hidden;
}
.content-wrapper-1 .result-wrapper-1 .result-1-box-4::after { content: ""; display: block; width: 90px; height: 37px; transform: rotate(45deg); background-color: #1485CC;
}
.content-wrapper-1 .result-1-text { padding: 25px; float: right; width: 400px; background-color: rgba(255, 255, 255, 0.3);
}
.content-wrapper-2 { width: 100%; height: 400px; margin: 10px;
}
.content-wrapper-2 .result-wrapper-2 { height: 250px; width: 450px; float: left; display: flex; flex-direction: row; align-items: center; justify-content: space-around; flex-wrap: wrap;
}
.content-wrapper-2 .result-wrapper-2 .result-2-box-1 { width: 75px; height: 75px; background-color: #0C40E8; border: 10px solid #0DFFF8;
}
.content-wrapper-2 .result-wrapper-2 .result-2-box-2 { width: 75px; height: 75px; background-color: #0C40E8; border: 10px dashed #0DFFF8;
}
.content-wrapper-2 .result-wrapper-2 .result-2-box-3 { width: 75px; height: 75px; background-color: #0C40E8; border: 10px dotted #0DFFF8;
}
.content-wrapper-2 .result-wrapper-2 .result-2-box-4 { width: 75px; height: 75px; background-color: #0C40E8; border: 10px groove #0DFFF8;
}
.content-wrapper-2 .result-wrapper-2 .result-2-box-5 { width: 75px; height: 75px; background-color: #0C40E8; border: 10px ridge #0DFFF8;
}
.content-wrapper-2 .result-wrapper-2 .result-2-box-6 { width: 75px; height: 75px; background-color: #0C40E8; border: 10px inset #0DFFF8;
}
.content-wrapper-2 .result-wrapper-2 .result-2-box-7 { width: 75px; height: 75px; background-color: #0C40E8; border: 10px outset #0DFFF8;
}
.content-wrapper-2 .result-wrapper-2 .result-2-box-8 { width: 75px; height: 75px; background-color: #0C40E8; border: 10px double #0DFFF8;
}
.content-wrapper-2 .result-2-text { padding: 25px; width: 400px; float: right; background-color: rgba(255, 255, 255, 0.3);
}
.content-wrapper-3 { width: 100%; height: 400px; margin: 10px;
}
.content-wrapper-3 .result-wrapper-3 { height: 250px; width: 450px; float: left; border-spacing: 10px;
}
.content-wrapper-3 .result-wrapper-3 .result-3-box-1 { width: 75px; height: 75px; background-color: #008B8B; text-align: center; display: table-cell; vertical-align: middle;
}
.content-wrapper-3 .result-wrapper-3 .result-3-box-2 { width: 75px; height: 75px; background-color: #008B8B; text-align: center; display: table-cell; vertical-align: middle;
}
.content-wrapper-3 .result-wrapper-3 .result-3-box-3 { position: relative; width: 75px; height: 75px; text-align: center; background-color: #008B8B; display: block; margin: 10px;
}
.content-wrapper-3 .result-wrapper-3 .result-3-box-3 span { position: absolute; top: 40%; left: 16%;
}
.content-wrapper-3 .result-wrapper-3 .result-3-box-4 { position: relative; width: 75px; height: 75px; text-align: center; background-color: #008B8B; display: block; margin: 10px;
}
.content-wrapper-3 .result-wrapper-3 .result-3-box-4 span { position: absolute; top: 40%; left: 16%;
}
.content-wrapper-3 .result-3-text { padding: 25px; width: 400px; float: right; background-color: rgba(255, 255, 255, 0.3);
}
.content-wrapper-4 { width: 100%; height: 400px; margin: 10px;
}
.content-wrapper-4 .result-wrapper-4 { height: 250px; width: 450px; float: left;
}
.content-wrapper-4 .result-4-text { padding: 25px; width: 400px; float: right; background-color: rgba(255, 255, 255, 0.3);
}
CSS tutorial - Script Codes
CSS tutorial - Script Codes
Home Page Home
Developer Ivan Sakoman
Username ssaakkaa
Uploaded June 12, 2022
Rating 3
Size 6,187 Kb
Views 52,624
Do you need developer help for CSS tutorial?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ivan Sakoman (ssaakkaa) Script Codes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!