CSS problem! (Razvoj web-stranica) @ Bug.hr Forum

11 godina

neaktivan

offline

pet 15.3.2013 11:30

Odgovori Citiraj

CSS problem

Bok svima!

Imam problem...nisam bas neki u kodovima ali ucim se. Naime u css-u imam h3 dakle hocu da mi ide iz plave u bijelu, ali da mi plava pokrije jedno 40% prostora sa lijeve strane i da prelazi u bijelu do kraja. E sad ja imam dvije slike dakle plavu traku i druga slika je plava u bijelu...da li mogu tako da stavim ovu plavu traku da se ponavlja do 40% pa da onda pocne druga slika od 40% ili kako ... nadam se da me kuzite...dakle hocu da mi h3 ide iz plave u bijelu s lijeva na desno...i tako da cista plava zauzme cca 30-40 % prostora...onda da prelazi lagano u bijelu...

Aj molim vas...da i ja nesto naucim...hvala puno

trajni link

0 0 hvala 0

xZero

15 godina

neaktivan

offline

pet 15.3.2013 13:16

Odgovori Citiraj

CSS problem!

To što hoćeš, zove se Gradient Color, postepen prijelaz iz jedne u dugu boju.
Idući put, Google is your friend.

Online aplikacija koja rijesava tvoj problem.
http://gradients.glrzad.com/

Naravno, morar ćeš se malo poigrati sa dobivenim CSS kodom. Paste kod ovdije pa ću ti ga ja ili neki kolega prilagoditi za <h3> i sl....

Pomogao sam? Zar nije lakše kliknuti gumb Hvala ili Thumb Up, nego pisati nepotrebni(spam) post

Poruka je uređivana zadnji put pet 15.3.2013 13:21 (xZero).

Moj PC

trajni link

0 0 hvala 0

Shiljo

11 godina

neaktivan

offline

pet 15.3.2013 15:44

Odgovori Citiraj

CSS problem!

A gle...ono sta ja dobijen nema smisla, sta ne moze to lakse nekako...dakle da stavim recimo prvi image...plavu crtu koja se ponavlja...i na nju nakeljim drugu sliku .png iz paintshopa plava u bijelu...a? Jer ovaj kod kad uvalin u css, svasta nesto bude ;) lol..ni mi dobro...

Evo ti dio css-a od sada...

h3 {
background: url(http://www.croatiacargo.com/phpvms/lib/skins/skyline_ctn/images/button_blue.png) no-repeat 40% !important;
background: url(http://www.croatiacargo.com/phpvms/lib/skins/skyline_ctn/images/blue.png) repeat-x;
border:1px solid #c0c0c0;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:#ffffff;
font-size: 11px;
font-family: Verdana;
vertical-align:middle;
padding:5px;
padding-left:30px;
margin-bottom:0;
}

Dakle prvi je onaj sa plave na bijelu, drugi je plava crta, ja san tu nesto kemija, ideja na ideju, ali ne ide...nikako...

background-image: linear-gradient(left , rgb(37,19,194) 25%, rgb(255,255,255) 70%); background-image: -o-linear-gradient(left , rgb(37,19,194) 25%, rgb(255,255,255) 70%); background-image: -moz-linear-gradient(left , rgb(37,19,194) 25%, rgb(255,255,255) 70%); background-image: -webkit-linear-gradient(left , rgb(37,19,194) 25%, rgb(255,255,255) 70%); background-image: -ms-linear-gradient(left , rgb(37,19,194) 25%, rgb(255,255,255) 70%); background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.25, rgb(37,19,194)), color-stop(0.7, rgb(255,255,255))

A ovo je kod koji sam dobio...hm...wtf ;)

Poruka je uređivana zadnji put pet 15.3.2013 15:47 (Shiljo).

trajni link

0 0 hvala 0

xZero

15 godina

neaktivan

offline

sub 16.3.2013 18:09

Odgovori Citiraj

CSS problem!

<!doctype html>
<head>
<title>TEST</title>
<style>
h3{
color: #000;
display: table-cell;
background: -moz-linear-gradient(left, rgba(0,0,192,1) 0%, rgba(128,128,223,0.04) 96%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,192,1)), color-stop(96%,rgba(128,128,223,0.04)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,192,1) 0%,rgba(128,128,223,0.04) 96%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,192,1) 0%,rgba(128,128,223,0.04) 96%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,192,1) 0%,rgba(128,128,223,0.04) 96%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,0,192,1) 0%,rgba(128,128,223,0.04) 96%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000c0', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
</style>
</head>
<body>
<h3>BUG.HR FORUM CSS TEST</h3>
</body>
</html>

Mislim da je ovo ono što tražiš.

Pomogao sam? Zar nije lakše kliknuti gumb Hvala ili Thumb Up, nego pisati nepotrebni(spam) post

Poruka je uređivana zadnji put sub 16.3.2013 18:10 (xZero).

Moj PC

trajni link

0 0 hvala 0

Shiljo

11 godina

neaktivan

offline

sub 11.5.2013 10:22

Odgovori Citiraj

CSS problem!

Je, riješio sam, hvala ;)

www.croatiacargo.com

trajni link

0 0 hvala 0