Tutorial creare template-uri CSS

Daizuke · January 16, 2018

În urma unei revelații, am zis să fac un tutorial în care să vă ajut să înțelegeți CSS. Am găsit câteva exemple făcute cu W3.CSS, un framework gen Bootstrap, dar noi o să le facem cu CSS3 Dacă vă place și dacă staff-ul forum-ului e de acord, o să încerc să postez zilnic câte un template.

Fără alte prelungiri, să începem.

Template-ul #1 ( Template de restaurant )

Mai întâi de toate, să creăm structura proiectului.

Creăm un folder, în care avem două fișiere: index.html și style.css. Numele acestor fișiere este opțional, le puteți denumi cum doriți.

Deschidem index.html cu orice editor de text doriți(Notepad++, Notepad, Sublime Text, Atom, Brackets), personal folosesc Notepad++ pentru această serie.

Partea 1: Mark-up-ul HTML.

Codul pentru header, head, meniu:

Spoiler


<!DOCTYPE html>
<html>
<head>
	<!-- Page title -->
	<title>Template #1</title>
	<!-- Style.css link -->
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

	<!-- header -->
	<header>
		<div class="logo">
			<h2><a href="index.html">Gourmet au Catering</a></h2>
		</div>
		
		<ul class="main-nav">
			<li><a href="#about">About</a></li>
			<li><a href="#menu">Menu</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</header>
	<!-- header -->

După ce ați deschis fișierul index, urmează niște lucruri extrem de simple: Pe prima linie, scriem declarația DOCTYPE, cea care-i comunică browser-ului că documentul este unul de tip HTML5, apoi deschidem tag-ul html, ca mai apoi tag-ul head. În tag-ul head, avem 2 lucruri: titlul paginii, cel care apare în browser și link-ul către fișierul CSS. Trecem mai departe și deschidem tag-ul body, mai apoi pe cel header. Header-ul va conține logo-ul și meniul de navigare al site-ului. În interiorul acestui header, avem două elemente. Un div care are clasa „logo„ și un ul care are clasa main-nav.

În div-ul logo, avem un h2 în care avem un link, care duce spre index.html. În interiorul link-ului, adică între <a></a> avem numele site-ului. Apoi, în ul avem 3 li-uri. Fiecare li conținând un link. Link-uri au target-ul/href-ul către #about, #menu și #contact. Dacă vă întrebați ce e cu #, ei bine.. acest # pus într-un href și apoi un text reprezintă un target, dacă de exemplu avem o secțiune numită contact și care are un id contact, care este ultima secțiune a site-ului și nu vreți să scrolați până acolo, în link-ul din header puteți pune #contact, iar apasând pe acel link, va scrola automat până la acea secțiune.

Codul pentru banner și image-caption:

Spoiler


	<!-- banner -->
	<div class="header"></div>
	<!-- banner -->

	<!-- the text inside the banner -->
	<div class="image-caption">
		<h1>Le Catering</h1>
	</div>
	<!-- the text inside the banner -->

Apoi, avem un div care are clasa header. Dvs o puteți numi cum doriți, eu i-am spus header. În acest .header este banner-ul site-ului, o imagine de 600px cu un text în partea de jos a imaginii, stânga.

Acest .header nu are nimic în interior, pentru că am adăugat imaginea din CSS. O să aveți mai jos codul. După acest div .header, urmează un alt div care are clasa image-caption. Acest div în interior are un h1, care este scrisul din interiorul imaginii banner-ului.

Codul pentru conținut:

Spoiler


<div class="content">
		<!-- about section -->
		<section id="about" class="about">
			<img src="https://www.w3schools.com/w3images/tablesetting2.jpg">
			<h1>About catering</h1>
			<h4>Tradition since 1889</h4>
			<p>The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use <span class="special">seasonal</span> ingredients.</p>
			<p class="grey-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</section>
		<!-- about section -->
		
		<!-- menu section -->
		<section id="menu" class="menu">
			<div class="left">
				<h1>Our Menu</h1>
				<ul>
					<li>
						<h3>Bread Basket</h3>
						<p>Assortment of fresh baked fruit breads and muffins 5.50</p>
					</li>
				
					<li>
						<h3>Bread Basket</h3>
						<p>Assortment of fresh baked fruit breads and muffins 5.50</p>
					</li>
				
					<li>
						<h3>Bread Basket</h3>
						<p>Assortment of fresh baked fruit breads and muffins 5.50</p>
					</li>
				
					<li>
						<h3>Bread Basket</h3>
						<p>Assortment of fresh baked fruit breads and muffins 5.50</p>
					</li>
				
					<li>
						<h3>Bread Basket</h3>
						<p>Assortment of fresh baked fruit breads and muffins 5.50</p>
					</li>
				</ul>
			</div>
			<img src="https://www.w3schools.com/w3images/tablesetting.jpg">
		</section>
		<!-- menu section -->
		
		<!-- contact section -->
			<section id="contact" class="contact">
				<h1>Contact us</h1>
				<p>We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste. Do not hesitate to contact us.</p>
				<h2>Catering Service, 42nd Living St, 43043 New York, NY</h2>
				<p style="font-size: 14px;">You can also contact us by phone 00553123-2323 or email catering@catering.com, or you can send us a message here:</p>
				<form>
					<input type="text" placeholder="Name">
					<input type="number" min="2" max="20" placeholder="How many people?">
					<input type="text" placeholder="Event date">
					<textarea placeholder="Message / Event details"></textarea>
					<button>Send message</button>
				</form>
			</section>
		<!-- contact section -->
	</div>

Iar acum începe frumusețea. Creăm un div care are clasa content, în care avem 3 secțiuni:

-> About. Această secțiune are id-ul about și clasa about. În interiorul tag-ului section avem: O imagine, un h1 care este titlul secțiunii, un h4 care este descrierea secțiunii și două paragrafe.

-> Menu. Această secțiune are id-ul menu și clasa menu. În interiorul tag-ului section avem: Un div care are clasa left, în care avem: Un h1 care este titlul secțiunii, iar apoi un ul care este meniul site-ului. În li-urile din ul, avem un h3 pentru titlul felulului de mâncare, gen pizza, etc și un p care este descrierea mâncării. Ieșim din ul și apoi avem o imagine.

-> Contact. Această secțiune are id-ul și clasa contact. În interiorul acestei secțiunii avem: Un h1 cu titlul ”Contact us”, apoi un p, cu o scurtă descriere, un h2 cu adresa unde poate fi găsit acest restaurant, un p care servește drept informație legată de form-ul de contact, iar apoi vine form-ul de contact, în care avem: un input de tipul text, cu placeholder-ul Name, apoi un alt input de tipul number, cu două atribute: min 2 și max 20, care are placeholder-ul How many people?, apoi un alt input de tip text, cu placeholder-ul Date, iar ca ultim input, avem un textarea cu placeholder-ul Message / Event Details. Apoi un button cu text-ul Send message.

Footer:

Spoiler


<!-- footer -->
	<footer>
		<p>&copy; 2017 - Your Restaurant Name</p>
	</footer>
<!-- footer -->

Partea a-2-a: CSS.

Spoiler


@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

* {
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
}

body {
	font-family: "Playfair Display";
	font-size: 15px;
	line-height: 1.5em;
	letter-spacing: 0.02em;
}

Pe prima linie din fișierul CSS, avem un import, prin care importăm font-ul Playfair-Display. Apoi folosim * pentru a aplica setări CSS tuturor elementelor de pe site. Avem padding 0, margin 0, text-decoration: none pentru a șterge underline-urile de la link-uri, iar apoi list-style: none pentru a șterge bulinele din listele ul. După, avem body-ul căruia îi aplicăm font-ul nostru, un font-size de 15px, o distanță între rânduri de 1.5 em = 22.5 px și o distanță între litere de 0.02 em = 0.3px.

Spoiler


header {
	position: fixed;
	width: 100%;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	height: 50px;
	z-index: 1;
}

header .logo {
	float: left;
	margin-left: 50px;
	font-size: 10px;
}

header .logo h2 a {
	color: #333;
	font-weight: normal;
	display: block;
	margin: 8px;
	padding: 5px;
	height: 25px;
}

header .logo h2 a:hover {
	background: #f4f4f4;
}

Apoi edităm stilul header-ului, căruia îi aplicăm un position: fixed, pentru a fi afișat atunci când scrolăm, apoi width 100% pentru a face header-ul să se extindă pe toată pagina, apoi un background alb, apoi un box-shadow pentru a vedea header-ul pe părțile albe, un height de 50px și z-index 1. Trecem la logo, căruia îi dăm un float: left, apoi un margin left de 50px și font-size de 10px. Apoi stilăm link-ul din interiorul logo-ului, pe care-l facem block, pentru a-i putea aplica padding, îi dăm o culoare neagră, padding de 5px, margin de 8 și height de 25px. Apoi aplicăm faza de hover, atunci când mouse-ul este pe link-ul logo-ului și îi dăm un background gri.

Spoiler


header ul.main-nav {
	float: right;
	margin-right: 50px;
}

header ul.main-nav li {
	display: inline-block;
	padding: 0 10px;
}

header ul.main-nav li a {
	color: #333;
	display: block;
	margin: 8px 0;
	padding: 5px 10px;
	height: 25px;
}

header ul.main-nav li a:hover {
	background: #f4f4f4;
}

Apoi, următorul element pe care-l stilăm este meniul de navigare, căruia îi dăm float: right, pentru a fi afișat în partea dreaptă a header-ului și îi aplicăm un margin right de 50 de px.Apoi, pentru li-urile din ul, aplicăm un dispay: inline-block, pentru a face li-urile să fie aliniate pe un singur rând. Și le alplicăm un padding de 0px de jos și sus și 10px la dreapta și stânga. Apoi, aplicăm același stil pentru link-urile din li-uri care l-am aplicat și link-ului logo-ului. Cu excepția faptului că aplicăm padding de 5px sus și jos și de 10 la dreapta și stânga, cât și un margin de 8px sus și jos, iar 0 la stânga și dreapta. Apoi, ca în cazul link-ului logo-ului, aplicăm un efect de hover, cu același background.

Spoiler


.header {
	height: 600px;
	background-image: url(https://www.w3schools.com/w3images/hamburger.jpg);
	background-position: center center;
	background-size: cover;
}

.image-caption h1 {
	margin-top: -85px;
	opacity: 0.6;
	font-size: 36px;
	letter-spacing: 5px;
	margin-left: 80px;
}

.content {
	width: 90%;
	margin: 120px auto 0 auto;
}

.about {
	border-bottom: 1px solid #ccc;
	padding-bottom: 150px;
}

Pasul următor este să stilăm div ce are clasa header. Căruia îi dăm 600px înălțime, o imagine de background, o poziție a background-ului centrată și o mărime a bg-ului cover. Apoi, urmează h1-ul din .image-caption, căruia îi dăm margin top -85 px, făcând h1-ul să ajungă pe imagine, îi dăm un font-size de 36 de px, o distanță între litere de 5px, un margin left de 80px și o opacitate de 0.6.

Apoi, stilăm container-ul pentru conținut, div-ul ce are clasa content, căruia îi dăm un width de 90% din mărimea paginii și un margin de 120px sus și jos și auto: dreapta, stânga, pentru a centra div-ul. Apoi, începem cu prima secțiune, anume about, căreia îi dăm un border-bottom de 1px, solid având culoarea gri închisă. Apoi folosind padding-bottom, împingem border-ul la 150px de secțiune.

Spoiler


.about img {
	float: left;
	margin-right: 30px;
	height: 500px;
	width: 600px;
	opacity: 0.75;
	border-radius: 4px;
}

.about h1, h4 {
	text-align: center;
}

.about h1,
.menu h1 {
	font-size: 36px;
	font-weight: normal;
	margin-bottom: 30px;
	padding-top: 30px;
}

.about h4 {
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 30px;
}

.about p {
	margin-bottom: 20px;
}

Apoi, începem stilare secțiunii propriu-zise. Prima dată începem cu imaginea secțiunii, căreia îi dăm un float: left, ca această să „plutească„ în partea stângă a secțiunii, iar titlurile și paragrafele să fie în dreapta.Îi dăm un 50px margin-right pentru a distanța restul conținutului de imagine. Apoi îi setăm 500px height și 600px width. Setăm opacitatea la 0.75, pentru a face imaginea mai luminoasă și un border-radius pentru a „tăia„ din colțurile imaginii 4px. Apoi, setăm h1 și h4 să fie pe centrul secțiunii, pentru că acestea două reprezintă titlul și descrierea site-ului. Apoi, aplicăm h1-ului din about, cât și cel din menu același stil, mai concret: un font size de 36 de px, font-weight normal, pentru a deîngroșa textul, margin-bottom 30px pentru a distanța conținutul de desubtul h1-ului și un padding-top, pentru a distanța h1-ul de banner. Aproximativ același stil îl aplicăm și pentru h4, fără padding-top. Apoi, setăm paragrafului un margin-bottom de 20px.

Deocamdată atât. O să revin cu un edit mai târziu. Să-mi spuneți dacă doriți să continui.

Nu pot da edit și deși mi-aș fi dorit să pun câteun post pentru fiecare template în parte, o să rog un administator să dea edit la post-ul de mai sus și să integreze ce am scris aici în acel post.

Fără alte adăugări, să continuăm.

Spoiler


.about span.special {
	background: #f1f1f1;
	padding: 2px 4px;
}

.about p.grey-text {
	opacity: 0.5;
}

.menu {
	margin-top: 60px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 50px;
}

.menu .left {
	float: left;
}

.menu ul li {
	padding: 20px 10px;
}

.menu ul li h3 {
	font-weight: normal;
	margin-bottom: 10px;
}

Dacă vă uitați mai atent în codul HTML, la secțiunea about, o să observați faptul că avem un cuvânt înconjurat de tag-ul span. Asta pentru că acel cuvânt este un cuvânt evidențiat. I-am dat span-ului clasa „special” și i-am aplicat un background și un padding. Apoi, al 2-lea paragraf are clasa grey-text, pentru că în template-ul nostru al doilea paragraf are culoare gri. Așa că acestui paragraf i-am setat opacitatea la 0.5. Apoi urmează a doua secțiune și anume meniul, căruia i-am dat 60px top, ca să se distanțeze de border-ul secțiunii about, un border-bottom și un padding-bottom, pentru a împinge border-ul ca în cazul secțiunii about. Apoi, i-am dat clasei left un float: left, pentru a centra imaginea cu div-ul left, precum în cazul secțiunii about. Itemelor listei din meniu le-am dat un padding de 20px top și bottom și 10px right și left, pentru a mări distanța dintre li-uri și pentru a ocupa spațiul cât să fie aproximativ egal cu imaginea atașată meniului. Apoi vine titlul fiecărui li, căruia i-am dat font-weight-ul pe normal și un margin bottom de 10px.

Spoiler


.menu ul li p {
	margin-left: 15px;
	opacity: 0.8;
	font-size: 14px;
}

.menu img {
	height: 600px;
	width: 650px;
	opacity: 0.75;
	border-radius: 4px;
	margin-left: 80px;
}

.contact {
	margin-top: 60px;
}

Apoi paragraful, care reprezintă descrierea elementelor din meniu, le-am dat un font-size mai mic și un opacity 0.8. Apoi, ca-n cazul imaginii din secțiunea about, am setat un width și un height, o opacitate, un border-radius și un margin left pentru a distanța imaginea de restul conținutului. Apoi am început cu ultima secțiune, anume contact, căreia i-am dat un margin top de 60 de px pentru a se distanța de border-ul secțiunii precedente.

Spoiler


.contact h1 {
	font-size: 32px;
	font-weight: normal;
	margin-bottom: 20px;
}

.contact p {
	margin-bottom: 20px;
}

.contact h2 {
	font-size: 16px;
	color: #607d8b;
	margin-bottom: 20px;
}

Apoi am început cu titlul secțiunii, căruia i-am dat un font-size mai mic decât celorlalte h1-uri din secțiuni, un font-weight normal și un margin-bottom de 20px. I-am dat p-ului un margin-bottom de 20px, iar h2-ului un font-size de 16px, o culoare albastră și un margin-bottom de 20px.

Spoiler


.contact form input {
	font-family: inherit;
	width: 100%;
	border: 0;
	border-bottom: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0;
	outline: 0 none;
}

.contact textarea {
	font-family: inherit;
	width: 100%;
	border: 0;
	border-bottom: 1px solid #ccc;
	padding: 10px;
	resize: none;
	outline: 0 none;
}

Mai sus am stilat baza secțiunii de contact, mai precis form-ul de contact. Am setat pentru input-uri un font-family inherit, însemnând font-ul pe care body-ul îl are, un border: 0, pentru a șterge toate border-urile, ca mai apoi să adaug un border-bottom de 1px, solid, de culoare gri. Un padding de 10px, un margin de 10px și outline 0( fără „animația„ când apeși click pe input). Apoi am stilat textarea, dând în mare parte același stil ca și la input-uri, adăugând doar un resize: none, pentru a nu permite utilizatorilor să se seteze înălțimea elementului textarea.

Spoiler


.contact button {
	padding: 10px 20px;
	border: 0;
	background: #f1f1f1;
	font-family: inherit;
	margin-top: 20px;
	cursor: pointer;
	border-radius: 3px;
}

footer {
	height: 80px;
	background: #f1f1f1;
	text-align: center;
	line-height: 80px;
	margin-top: 50px;
}

Apoi, am stilat butonul de submit, căruia i-am dat în mare parte aceleași setări ca și input-urile, adăugând doar un background, un cursor: pointer și un border-radius. În finat, am stilat footer-ul, căruia i-am dat un height de 80px, background asemănător butonului, un text-align: center, distanța dintre rânduri de 80px și un margin-top de 50px.

Cam atât! Lăsa-ți-mi în comentarii părerea voastră despre această idee, dacă ar trebui să continui sau nu.

Descarcă template-ul final: www.girlshare.ro/3490018933.5

Sign In

Tutorial creare template-uri CSS

Recommended Posts

Daizuke

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Similar Content

Activity

Browse

Important Information