CSS Osnove (Cascading Style Sheets) izdvojena tema

poruka: 39
|
čitano: 31.013
|
moderatori: Danny_HR, Lazarus Long, XXX-Man
+/- sve poruke
ravni prikaz
starije poruke gore
10 godina
neaktivan
offline
Re: CSS Osnove (Cascading Style Sheets)

Evo ja sam ti gledajuci sliku napravio kompletnu imitaciju slike pa da vidis kako sam ja rjesio tvoj problem.

Sliku sam pronasao preko google slika - pretrazivanje po slikama tako da uploudam sliku i on mi izbaci slicne/iste. 

Boje sam nasao preko color pickera, fontove sam pogadjao napamet.

 

U prilogu je prva slika moja verzija a druga tvoja. 

 

.container{
width: 530px;
height: auto;
margin: 100px auto;
border: 5px solid #33B4D1;
text-align:center;
}

 

Dakle napravio sam container sa zadanom sirinom, visinu nisam zadao nego sam pustio da bude visoka koliko treba, inace se to netreba pisati uopce height za taj efekt (to je standard) ali ja sam u ove svrhe napisao da je "auto". Marginama sam zadao da se poravnava u sredinu i 100px gore (i dolje) od dokumenta. Stavio sam border od 5px da okruzuje container te da se sav tekst ( to ukljucuje sliku!!!! ) poravnava centralno u containeru.  

NAPOMENA: 

Container moze biti i responzivan ako mu stavimo sirinu 100%!! 

 

 

<div class="container">

<img src="http://s1.postimg.org/cv82h8jwr/Download_Computer_128.png">

</div>

 

Zatim sam tu klasu pozvao u htmlu i u nju sam umetnu sliku. Klasika.  

 

 

Stilu slike sam pristupio na ovaj nacin tako da se taj stil odnosi samo na sliku unutar container klase a ne na sve ostale.

 

.container img{
position:relative;
top:-70px;
margin:0;
}

 

Ovdje je sva mudrost. Sliku sam pozicionirao relativno (u odnosu na njenu normalnu poziciju). Zatim sam zadao top na -70 px kako bi sliku pomaknuo -70 (ovisi o slici) piksela odnosno da preklopi border i da se dobi taj efekt preklapanja. 

Posto se sav tekst (tako i slika) poravnavaju centralno u containeru nije potrebno namjestati niti left niti right svojstvo!!!! 

NAPOMENA: 

Isti efekt se moze postici i ako apsolutno pozicioniramo sliku unutar containera. Ali slika se onda pozicionira u odnosu na prvu klasu iznad nje (parent class) koja ima zadanu poziciju koja nije staticna. U nasem slucaju prva takva klasa je HTML!!! Sto znaci da se slika pozicionira u odnosu na HTML, pa je onda potrebno namjestati i Top svojstvo i Left svojstvo jer vise ne vrjedi centralno pozicioniranje za img klasu!!!!!!!! Takodjer responzivnost containera je dovedena u pitanje!

 

Tada sam postigao rjesenje problema koje si zadao. Sve ostalo je klasika uredjivanje u CSSu da to bude isto kao i tvoj primjer. Evo i cjelog koda : 

 

 

<div class="container">
<img src="http://s1.postimg.org/cv82h8jwr/Download_Computer_128.png">
<h3>DOWNLOAD SECRET SEO TACTICS</h3>
<p>Do you know hot to rank on the first page on google? Well, I do. In these FREE report i will reveal all of my tactics which you can use to dominate the first page of google!</p>
<div class="btn">DOWNLOAD HERE</div>
</div>

 

@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
body{
font-family: 'Oswald', sans-serif;
}
.container{
width: 530px;
height: auto;
margin: 100px auto;
border: 5px solid #33B4D1;
text-align:center;
}
.container img{
position:relative;
top:-70px;
margin:0;
}
.container h3{
margin-top:-50px;
color:#333;
}
.container p{
font-family: 'Open Sans', sans-serif;
color:#333;
padding: 0 40px;
text-align:left;
}
.btn{
background:#14B397;
padding: 10px 20px;
color:#fff;
margin: 0 0 30px;
display: inline-block;
letter-spacing:2px;
}

 

Primjer sam radio na codepenu pa je ovdje i fizicki primjer pa mozes kopati po kodu i isprobavati:

http://codepen.io/riogrande/pen/KpPmzK

 

moje rjesenje moje rjesenje
tvoj upit tvoj upit
7 godina
neaktivan
offline
Re: CSS Osnove (Cascading Style Sheets)

Prvi napraviš sa negativnim marginom.

npr imaš <div> koji ima taj border

unutra imaš npr <img> koji ima margin: -50px auto 0;


www.purplemedia.hr
4 godine
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

maryoll, puuno hvala na detaljnom objašnjenu, sve mi je jasno i vjerujem da ću u budućnosti to znati iskoristiti... mantolic također zahvaljujem na savjetu! 

 
0 0 hvala 0
4 godine
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Uspio sam napraviti sve što sam htio s ovim slikama na borderima, još jendom hvala. Sad me zanima da li se border može napraviti da bude u više boja koje bi se ponavljale s tim da budu nakošene? ako me razumijete? ako ne recite pa ću probati pronaći sliku negdje pa ću vam staviti.

 
0 0 hvala 0
10 godina
neaktivan
offline
CSS Osnove (Cascading Style Sheets)

Ono sto ti trazis zove se gradient border . Mislim da ti tu netreba puno pojasnjavati ima fantasticnih tutoriala vec napisanih s objasnjenjima. Evo par linkova 

 

http://www.hongkiat.com/blog/css-gradient-border/ 

 

https://css-tricks.com/examples/GradientBorder/ 

 

http://codepen.io/samarkandiy/pen/lvrBn

 
0 0 hvala 0
6 godina
offline
CSS Osnove (Cascading Style Sheets)

Pozz zanima me cemu sluzi svojstvo clear: both; i mozete li mi objasniti kako rade pozicije fixed, absolute, relative o čemu one ovise? 

 
0 0 hvala 0
8 godina
neaktivan
offline
Re: CSS Osnove (Cascading Style Sheets)
Xyloto kaže...

Pozz zanima me cemu sluzi svojstvo clear: both; i mozete li mi objasniti kako rade pozicije fixed, absolute, relative o čemu one ovise? 

 Clear:both ti cisti float, znaci ako imas neke elemente koji su ti u floatu, pa nakon njih ide normalan tekst, on bi ti bio negdje ispod toga sto ti ima float, nakon clear: both, on ide normalno ispod.. Position: fixed - taj element ti je na zadanoj poziciji na stranici, ali uvijek, cak i nakon skrolanja.. Absolute i relative su ti za malo preciznije pozicioniranje elemenata, absolute ti ide na poziciju koju mu zadas s top, left, right, bottom, dok relative ide na relativnu poziciju u odnosu na pocetnu, a pomak mu definiras s top, left, right, bottom

6 godina
offline
CSS Osnove (Cascading Style Sheets)

 Kako da mi bude jednak razmak između ova dva kontenjera od headera?

 

Ako mi css kod izgleda ovako:

.right je div koji obuhvaća oba ova kontenjera, a .right-container su mi ova dva kontenjera, jedan je prazan a u drugome su krugovi.

 

.right
{
float: right;
height: 500px;
width: 85%;
background-color: #99CCFF;
margin-top: 5px;
border-radius: 5px;
margin-bottom: 5px;
}

.right-container
{
display: inline-block;
height: 400px;
width: 48%;
background-color: blue;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
position: relative;
clear: both;


}

Poruka je uređivana zadnji put pet 31.7.2015 23:45 (Xyloto).
 
0 0 hvala 0
10 godina
neaktivan
offline
Re: CSS Osnove (Cascading Style Sheets)
poigraj se sa marginama
Nova poruka
E-mail:
Lozinka:
 
vrh stranice