Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Przezroczyste zewnętrzne obramowanie
Andrzej95
post
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 18.06.2012

Ostrzeżenie: (0%)
-----

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)
Go to the top of the page
+Quote Post
sajegib
post
Post #2





Grupa: Zarejestrowani
Postów: 352
Pomógł: 59
Dołączył: 16.01.2013

Ostrzeżenie: (0%)
-----

google -> css opacity
Go to the top of the page
+Quote Post
Damonsson
post
Post #3





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

To jest pozornie ramka. Tak naprawdę to ramka to tylko
[CSS] pobierz, plaintext 
  1. border: 1px solid black;
[CSS] pobierz, plaintext

a efekt przezroczystej ramki, robi:
[CSS] pobierz, plaintext 
  1. padding: 6px
  2. 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 
  1. 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
Go to the top of the page
+Quote Post
Rysh
post
Post #4





Grupa: Zarejestrowani
Postów: 821
Pomógł: 111
Dołączył: 11.09.2006
Skąd: Biała Podlaska

Ostrzeżenie: (0%)
----- 

[CSS] pobierz, plaintext 
  1. border: 1px solid rgb(0, 0, 0);
  2. 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
Go to the top of the page
+Quote Post
Andrzej95
post
Post #5





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 18.06.2012

Ostrzeżenie: (0%)
-----

Cytat(Damonsson @ 5.02.2013, 22:50:13 ) *
To jest pozornie ramka. Tak naprawdę to ramka to tylko
[CSS] pobierz, plaintext 
  1. border: 1px solid black;
[CSS] pobierz, plaintext

a efekt przezroczystej ramki, robi:
[CSS] pobierz, plaintext 
  1. padding: 6px
  2. 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?


Cytat(Damonsson @ 5.02.2013, 22:50:13 ) *
Edit: w nowszych przeglądarkach powinno jeszcze zadziałać coś takiego
[CSS] pobierz, plaintext 
  1. 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
Go to the top of the page
+Quote Post
Damonsson
post
Post #6





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Mały błąd, tak powinno być:
[CSS] pobierz, plaintext 
  1. border: 6px solid rgba(255, 255, 255, 0.42);
[CSS] pobierz, plaintext


Obrazek to jakiś .png/.gif z jakąś tam przezroczystością.
Go to the top of the page
+Quote Post
Andrzej95
post
Post #7





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 18.06.2012

Ostrzeżenie: (0%)
-----

Cytat(Damonsson @ 5.02.2013, 23:19:40 ) *
Mały błąd, tak powinno być:
[CSS] pobierz, plaintext 
  1. 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
Go to the top of the page
+Quote Post
Damonsson
post
Post #8





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
Andrzej95
post
Post #9





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 18.06.2012

Ostrzeżenie: (0%)
-----

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)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.05.2026 - 17:38
Powered By IP.Board © 2026  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn