Kezdőoldal » Számítástechnika » Weblapkészítés » Ilyen árnyékot hogyan lehet...

Ilyen árnyékot hogyan lehet írni css-eben?

Figyelt kérdés

Sziasztok van itt ez az oldal minta [link]


a képen látható fehér menü árnyékáról beszélek


2013. jún. 2. 16:48
 1/7 anonim ***** válasza:
Tök egyszerű, beállítod háttérnek a képet, ahogy ők is csinálták: [link]
2013. jún. 2. 16:54
Hasznos számodra ez a válasz?
 2/7 A kérdező kommentje:
Szia én nem erre gondolok ha nem a solarbux témára ami a képen látható azon van felül a fehér menü annak az árnyékát akarom megcsinálni
2013. jún. 2. 17:11
 3/7 anonim ***** válasza:
Hát nézd, ahogy látom az az árnyék íves, és középen világosabb, így 3D-s hatást kelt. Nem tudok róla, hogy ilyet CSS-sel le lehet írni, szóval én visszautalnék az #1 válaszomra: háttérképként.
2013. jún. 2. 17:22
Hasznos számodra ez a válasz?
 4/7 anonim ***** válasza:

CSS3-ban van olyan property, hogy text-shadow


goglizz rá.. egy lehetséges kivitel:

text-shadow: 0 0 10px #000, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff;

2013. jún. 2. 17:45
Hasznos számodra ez a válasz?
 5/7 anonim ***** válasza:

A felső menü alatt lévő árnyék PNG -ben van.

CSS3 -ban sem lehet ilyet csinálni.

2013. jún. 2. 18:21
Hasznos számodra ez a válasz?
 6/7 A kérdező kommentje:
és ilyen árnyékot hogyan lehet képen csinálni?
2013. jún. 2. 21:18
 7/7 anonim ***** válasza:

CSS-el ilyet lehet:


<!DOCTYPE html>

<html>

<head>

<title>Oldal</title>

<style type="text/css">

body {

background: #ade;

color: #666;

}


.box {

width: 400px;

height: 50px;

background: #eee;

border: 5px solid #fff;

border-radius: 3px;

margin: 200px auto;

padding: 20px;

position: relative;

box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) inset;

}


.box:before, .box:after {

position: absolute;

bottom: 12px;

box-shadow: 0 15px 15px rgba(0, 0, 0, 0.5);

width: 180px;

content: "";

z-index: -1;

top: 80%;

}


.box:after {

transform: rotate(3deg);

left: 5px;

}


.box:before {

transform: rotate(-3deg);

left: auto;

right: 5px;

}

</style>

</head>


<body>

<div class="box">

Ez egy doboz.

</div>

</body>

</html>

2013. jún. 2. 21:36
Hasznos számodra ez a válasz?

Kapcsolódó kérdések:




Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!