Logowanie

Czy da sie uzyskac taki efekt uzywajac samego CSS i HTML?

pytanie zadane 1 lutego 2017 w HTML i CSS przez tap Nowicjusz (170 p.)

Czesc wszystkim :) Chcialbym na mojej stronie umiescic pasek pod menu, ktory oddzielalby menu od tresci strony. Chcialbym, by ten pasek mial taki delikatny efekt rozswietlania z obu stron. Chcialbym wiedziec, czy moge taki efekt uzyskac uzywajac samego CSS i HTML, czy musze go zaprojektowac np. w gimpie i wstawic jako zdjecie? Albo ogolnie chcialbym spytac jak najlepiej moglbym uzyskac taki efekt?

2 odpowiedzi

odpowiedź 1 lutego 2017 przez hoktaur Pasjonat (22,250 p.)
wybrane 2 lutego 2017 przez tap

Najlepsza

Myślę że jesteś w stanie takie coś uzyskać używając:

CSS3 Gradients do tego białego paska

oraz

CSS3 Shadow w celu rozświetlenia na górę i dół

komentarz 1 lutego 2017 przez hoktaur Pasjonat (22,250 p.)

A żeby nie być gołosłowny to mogło by być coś takiego:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0px;
    padding: 0px;
}
#grad1 {
	margin-top: 100px;
    height: 30px;
    background: -webkit-linear-gradient(lightgrey, white, lightgrey); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgrey, white, lightgrey); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgrey, white, lightgrey); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgrey, white, lightgrey); /* Standard syntax (must be last) */
    box-shadow: 0px 0px 100px grey, 0 0 150px  #bfbfbf, 0 0 2505px darkblue;
}

</style>
</head>
<body>


<div id="grad1"></div>

</body>
</html>

komentarz 2 lutego 2017 przez tap Nowicjusz (170 p.)
przywrócone 2 lutego 2017 przez tap

Super! Wielkie dzieki! Sam podobny efekt zrobilem, ale ten nawet lepiej wyglada

komentarz 2 lutego 2017 przez Comandeer Guru (601,590 p.)

Wersje stylów z przedrostkami można spokojnie wywalić.

odpowiedź 1 lutego 2017 przez Kamil Naja Nałogowiec (27,410 p.)

Można pobawić się z gradientami, albo użyć jakiegoś efektu cienia.

komentarz 1 lutego 2017 przez tap Nowicjusz (170 p.)

Hmm. czy jest moze jakas strona gdzie wypisane sa wszystkie tego typu efekty i moglbym sobie z nich powybierac?

komentarz 1 lutego 2017 przez littlerunaway Obywatel (1,790 p.)

http://www.colorzilla.com/gradient-editor/

komentarz 1 lutego 2017 przez littlerunaway Obywatel (1,790 p.)

http://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28248\%2C80\%2C50\%2C1\%29\%200\%25\%2C\%20rgba\%28241\%2C111\%2C92\%2C1\%29\%2050\%25\%2C\%20rgba\%28246\%2C41\%2C12\%2C1\%29\%2051\%25\%2C\%20rgba\%28240\%2C47\%2C23\%2C1\%29\%2071\%25\%2C\%20rgba\%28231\%2C56\%2C39\%2C1\%29\%20100\%25\%29\%3B'

komentarz 2 lutego 2017 przez tap Nowicjusz (170 p.)

Wielkie dzieki :) nie mialem pojecia, ze jest cos takiego, czlowiek uczy sie cale zycie

Podobne pytania

0 głosów

1 odpowiedź 617 wizyt

Jak uzyskac taki efekt co na zdjęciu ?

pytanie zadane 5 czerwca 2016 w HTML i CSS przez uMAXa Gaduła (4,290 p.)

0 głosów

2 odpowiedzi 279 wizyt

Jak uzyskac taki efekt?

pytanie zadane 2 sierpnia 2017 w HTML i CSS przez kamil29 Obywatel (1,230 p.)

0 głosów

1 odpowiedź 653 wizyt

Jak uzyskać taki efekt? HTML/CSS/JAVA

pytanie zadane 4 grudnia 2018 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...