Jak zrobić tło newsów przezroczyste z zaokrągleniami?

Potrzebuję do strony zrobić takie okno przezroczyste co pod oknem jest tło coś jak to

Powiem Ci jak to zrobić w Photoshopie, jak używasz innego programu graficznego to musisz kombinować, choć opcje i metoda powinna być podobna.

 

  1. Otwierasz PS dajesz CTRL+N otworzy Ci się okno, w którym wybierasz właściwości grafiki którą tworzysz, rozdzielczość ustawiasz jaką potrzebujesz i w “zawartość tła” ustawiasz “przezroczysty”

  2. Następnie z lewej strony z zasobnika masz ikonkę czarnego kursora myszki i gdzieś koło niej domyślnie w PS jest taka linia chyba że ją zmieniałeś to będzie tam coś innego. Najlepiej naciśnij U na klawiaturze, co spowoduje przełączenie się do tej lini i powinna ona się w tym zasobniku podświetlić. Jak już będziesz ją widział, wtedy klikasz prawym przyciskiem myszki na niej i pokaże Ci się menu podręczne z innymi kształtami. Wybierasz “zaokrąglony prostokąt”

  3. Wybierasz kolor czarny i przeciągając myszką rysujesz jaki jaki chcesz mieć ten prostokąt z zaokrąglonymi rogami

  4. Jak już narysujesz to po prawej stronie jest coś takiego jak Warstwy. Musisz mieć zaznaczoną warstwę w której widoczny jest ten prostokąt który narysowałeś. W okolicach tej warstwy będzie taka opcja jak “krycie” i tam ustawiasz np 80% wtedy prostokąt stanie się przezroczysty.

  5. Jak już zrobisz wszystko pod swoje potrzeby zapisujesz plik jako .PNG , nie możesz dać innego rozszerzenia bo inaczej przezroczystość nie zadziała.

Po pierwsze grafiki to przeżytek, masz opacity i border radius. <- wklej w google będziesz miał miliony przykładów.

 

Co do ps’a, nie dość że walisz grafikę, to jeszcze jako całość co waży nie wiadomo ile. Korzystając z ps’a powinieneś wrzucić 1 róg i pixel . Nie ma to jak grafik wkręci się do tworzenia stron i myśli że wszystko potrafi. A robi tak większość pseudowebmasterów którzy zaczynali od grafiki, i potem wytłumacz takiemu że źle tnie layout a ty musisz go ciąć jeszcze raz .

Co do pkt5, o gif nie słyszał ? Jest lżejszy.

Nie uważam że wszystko potrafię. Napisałem najprostszy sposób według mnie aby pomóc, bo jak widać nie ma tu tłumów chętnych do pomocy. Jeśli ktoś pyta jak zrobić przezroczyste tło to raczej nie jest mocny w tworzeniu stron czy grafice. Skoro znasz lepszą metodę wystarczyło napisać. “Ja znam leszy sposób, spróbuj…” czy coś w tym stylu. Ale po co. Lepiej mnie zmieszać z błotem. W końcu w necie można wszystko. Dzięki za lekcję kultury. 

Nie nie to jest sposób nie przemyślany, to się jakoś robiło w css kolor tła i żeby była przezroczystość i w css i chyba też w html żeby była ta tabelka okna z newsem.

Tutaj mam lepszy przykład zdjęcia jakby to miało wyglądać, ale wiem że twórca nie robił żadnych grafik tylko wszystko w css  w kodzie i oto taki wynik.

http://i1.ytimg.com/vi/OCfkNEecEhE/maxresdefault.jpg

 

PNG daje o wiele większe możliwości. Jeżeli wystarcza Ci to co oferuje format GIF (256 kolorów i 1 kolor przezroczystości) to równie dobrze możesz użyć obrazu PNG zapisanego w formacie 8 bitowym z kanałem alfa. Nikt normalny już od lat nie używa gif (dokładnie, od czasu pojawienia się następcy IE6).

wystarczy dodać opacity i border-radius.

To nie było bezpośrednio do ciebie, nie należy jednak rozpowszechniać takich praktyk. Potem strona waży kilkanaście mega, a jedyną gorszą rzeczą są strony pseudo-flash

 

No tutaj jest w drugą stronę, tak się dzieje jak webmaster bierze się za grafikę. 

Mogę się “mylić”, bo nie korzystam z tego “na co dzień”, ale nadanie “opacity” dla obiektu takiego jak div, wywołuje przeźroczystość również na jego zawartości (do sprawdzenia), a chyba nie o to chodzi, by elementy w takim div’ie były na wpół widoczne ;).

Skala jest od zera do jedynki. To w zasadzie procent wypełniania, z tym że w zapisie dziesiętnym. Istotnie: kropka zamiast przecinka … standard bardziej światowy :]

Tak, wiem, z tym że zero i jedynka są nieistotnymi skrajnymi (w tym przypadku, 0 = brak tła, 1 = brak przeźroczystości), gdzie dla pierwszego nie ma sensu określać koloru (tym samym nadawać “rgb”, zamiast tego podać none lub lepiej, transparent), a w drugim dopisywać wartość kanału alfa (wystarczy sam zapis koloru “rgb” lub innego typu jego zapisu)… ale to tak w gwoli ścisłości, jako “wiedza bezużyteczna” :wink: