[CSS][HTML]Przezroczyste zewnętrzne obramowanie Opcje

[Andrzej95]

Witam, czy jest możliwość zrobienia w CSS takiego obramowania jak ma strona: http://dbaw.cba.pl/
Jak widzimy jest to przezroczyste oraz na zewnątrz obiektu. Z góry dzięki za jakąkolwiek pomoc. (IMG:style_emoticons/default/smile.gif)

[sajegib]

google -> css opacity

[Damonsson]

To jest pozornie ramka. Tak naprawdę to ramka to tylko

[CSS] pobierz, plaintext 
border: 1px solid black;
[CSS] pobierz, plaintext 

a efekt przezroczystej ramki, robi:

[CSS] pobierz, plaintext 
padding: 6px
background: url(...) transparent;
[CSS] pobierz, plaintext 

Czyli cała treść wielkiego div'a, ma tło z przezroczystością (koniecznie .png/.gif oraz parametr transparent), która to treść jest odsunięta od krawędzi o 6px, a więc nieodsunięta część tworzy 6px ramkę wokół.


Edit: w nowszych przeglądarkach powinno jeszcze zadziałać coś takiego

[CSS] pobierz, plaintext 
border-color: 6px solid rgba(255, 255, 255, 0.42);
[CSS] pobierz, plaintext 

ostatni parametr to przezroczystość w przedziale 0 - 1

Ten post edytował Damonsson 5.02.2013, 22:54:31

[Rysh]

[CSS] pobierz, plaintext 
border: 1px solid rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.3);
[CSS] pobierz, plaintext 

Do border dodajesz parametr czwarty w przedziale 0-1 i robisz przezroczystość.

edit:
@up: ktoś mnie wyprzedził (IMG:style_emoticons/default/smile.gif)

Ten post edytował Rysh 5.02.2013, 22:57:55

[Andrzej95]

To jest pozornie ramka. Tak naprawdę to ramka to tylko

[CSS] pobierz, plaintext 
border: 1px solid black;
[CSS] pobierz, plaintext 

a efekt przezroczystej ramki, robi:

[CSS] pobierz, plaintext 
padding: 6px
background: url(...) transparent;
[CSS] pobierz, plaintext 

Czyli cała treść wielkiego div'a, ma tło z przezroczystością (koniecznie .png/.gif oraz parametr transparent), która to treść jest odsunięta od krawędzi o 6px, a więc nieodsunięta część tworzy 6px ramkę wokół.

Okey. A ten obrazek to po prostu czarna linia?

Edit: w nowszych przeglądarkach powinno jeszcze zadziałać coś takiego

[CSS] pobierz, plaintext 
border-color: 6px solid rgba(255, 255, 255, 0.42);
[CSS] pobierz, plaintext 

ostatni parametr to przezroczystość w przedziale 0 - 1

U mnie raczej ten sposób nie działa.

EDIT:
Jednak dalej nie wiem jak to zrobić. ; /

Ten post edytował Andrzej95 5.02.2013, 23:22:10

[Damonsson]

Mały błąd, tak powinno być:

[CSS] pobierz, plaintext 
border: 6px solid rgba(255, 255, 255, 0.42);
[CSS] pobierz, plaintext 

Obrazek to jakiś .png/.gif z jakąś tam przezroczystością.

[Andrzej95]

Mały błąd, tak powinno być:

[CSS] pobierz, plaintext 
border: 6px solid rgba(255, 255, 255, 0.42);
[CSS] pobierz, plaintext 

Obrazek to jakiś .png/.gif z jakąś tam przezroczystością.

Działa, jednak bez przezroczystości. :C

[Damonsson]

Zobacz sobie taki przykładzik, powinno Ci się wyjaśnić wszystko:

http://jsfiddle.net/8Arx5/6/

Ten border może nie zadziałać, dla pewności zastosuj ten 1szy sposób, dodatkowo możesz dać tą 1px czarną ramkę, czego w tym drugim sposobie tak łatwo się nie da zrobić.

Ten post edytował Damonsson 5.02.2013, 23:37:55

[Andrzej95]

Dobra dzięki, pomógł ten kod ze strony. Właśnie go ogarniam i dostosowuje do mojej stronki. Jeszcze raz wielkie dzięki. (IMG:style_emoticons/default/smile.gif)