Zaokrąglone rogi HTML. Przesunięcie konturu ramki zewnętrznej

Ramka CSS3 uzupełnia możliwość formatowania granic elementów o właściwości, które pozwalają za rogami element, a także użyj Obrazy zaprojektować granice elementu.

Zaokrąglone rogi i ramki do zdjęć

1. Zaokrąglanie narożników promieniem granicznym

Obsługa przeglądarki

TJ: 9.0
Firefoksa: 4.0
Chrom: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
Safari na iOS: 7.1
Opera Mini: —
Przeglądarka Androida: 4.1
Chrome na Androida: 44

Właściwość umożliwia zaokrąglanie rogów małych liter i elementy blokowe. Krzywą dla każdego kąta definiuje się za pomocą jednego lub dwóch promieni określających jego kształt − koło Lub elipsa. Promień dotyczy całego tła, nawet jeśli element nie ma obramowania, dokładne położenie siecznej określa się za pomocą właściwości back-clip.

Właściwość border-radius umożliwia zaokrąglenie wszystkich narożników na raz, a użycie właściwości border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius umożliwia można zaokrąglić każdy róg osobno.

Jeśli określisz dwie wartości dla właściwości promienia granicznego, wówczas pierwsza wartość zostanie zaokrąglona lewy górny I Dolny prawy róg, i drugi - w prawym górnym rogu I na dole po lewej.

Wartości określone przez / określić poziomy I promienie pionowe. Nieruchomość nie podlega dziedziczeniu.

Opcje

Div (szerokość: 100px; wysokość: 100px; obramowanie: 5px bryła;).r1 (promień obramowania: 0 0 20px 20px;).r2 (promień obramowania: 0 10px 20px;).r3 (promień obramowania: 10px 20px ; ;) .r4 (promień granicy: 10px/20px;) .r5 (promień granicy: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (promień granicy: 10px 20px 30px 40px/30px;) .r7 (promień obramowania: 50%;).r8 (promień obramowania u góry: brak; promień obramowania u dołu: brak; promień obramowania: 30px/90px;).r9 (promień obramowania u dołu-lewego: 100px;).r10 ( promień obramowania: 0 100%;).r11 (promień obramowania: 0 50% 50% 50%;).r12 (promień lewego górnego obramowania: 100% 20px; promień obramowania-dolnego prawego: 100% 20px ;)
Ryż. 1. Przykłady różne opcje zaokrąglanie narożników bloków

2. Obraz graniczny

Obsługa przeglądarki

TJ: 11.0
Firefoksa: 15,0, 3,5 -moz-
Chrom: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15,0, 11,0 -o-
Safari na iOS: 7.1
Opera Mini: 8 -o-
Przeglądarka Androida: 4.4, 4.1 -webkit-
Chrome na Androida: 42

Właściwość umożliwia ustawienie obrazu jako ramki elementu. Głównym wymaganiem dla obrazu jest to, że musi być symetryczny. Właściwość zawiera następujące wartości: (border-image: szerokość źródłowego powtórzenia plasterka;) .

Z pomocą tego prosty obraz Możesz dostać te ramki dla elementu.

/* Przykład 1 */ div ( szerokość: 260 pikseli; wysokość: 100 pikseli; styl obramowania: jednolity; szerokość obrazu obramowania: 15 pikseli; źródło obrazu obramowania: url(border_round.png); plasterek obrazu obramowania: 30 ; border-image-repeat: stretch; ) /* Przykład 2 */ div ( szerokość: 260px; wysokość: 100px; styl obramowania: solidny; szerokość-obrazu obramowania: 15px; źródło-obrazu obramowania: url(border_round. png); kawałek obrazu obramowania: 30; powtórzenie obrazu obramowania: okrągły; )
Ryż. 2. Przykład projektowania granic bloków za pomocą obrazu

Wycina A - B - C - D z narożników ramki, a znajdująca się pomiędzy nimi część obrazu wypełnia pozostałą przestrzeń ramki zgodnie z określoną wartością właściwości border-image-repeat. Rozmiar narożnika (cale) w tym przykładzie jest to liczba 30) jest określana przy użyciu wartości właściwości border-image-slice.

2.1. szerokość obrazu obramowania

Właściwość określa szerokość obrazu dla obramowania elementu. Jeśli szerokość nie jest określona, ​​domyślnie wynosi 1.

szerokość obrazu obramowania
Wartości:
długość	Ustawia szerokość obramowania w jednostkach długości - px/em. Jednorazowo możesz ustawić od jednej do czterech wartości. Jeśli zostanie podana jedna wartość, to szerokość wszystkich boków ramki będzie taka sama, dwie wartości określają szerokość góra-dół i prawy-lewy itd.
numer	Wartość liczbowa, przez którą mnożona jest wartość szerokości obramowania.
%	Szerokość obramowania elementu jest obliczana w zależności od rozmiaru obrazu. Poziomo względem szerokości, pionowo - względem wysokości.
automatyczny	Odpowiada wartości wycinka obrazu obramowania.
wstępny
dziedziczyć

Składnia

Div (szerokość obrazu obramowania: 30px;) Ryc. 3. Przykład ustawienia szerokości ramki obrazu za pomocą różne rodzaje wartości

2.2. źródło-obrazu-granicznego

Właściwość określa ścieżkę do obrazka, który posłuży do dekoracji krawędzi bloku.

Składnia

Div (źródło obrazu-granicznego: url(border.png);)

2.3. elementy plasterka obrazu obramowania

Właściwość określa wielkość części obrazu użytych do utworzenia obramowań elementu i dzieli obraz na dziewięć części: cztery rogi, cztery krawędzie pomiędzy rogami oraz Środkowa część.

Wartości:
numer	Rozmiar części ramy można ustawić za pomocą jednej, dwóch, trzech lub czterech wartości. Jedna wartość ustawia obramowanie na ten sam rozmiar po obu stronach elementu. Dwie wartości: pierwsza określa rozmiar górnej i dolnej krawędzi, druga - prawej i lewej. Trzy wartości: pierwsza określa rozmiar górnej krawędzi, druga - prawej i lewej strony, a trzecia - dolnej granicy. Cztery wartości: określa rozmiary górnej, prawej, dolnej i lewej krawędzi. Wartość liczbowa reprezentuje liczbę pikseli.
%	Rozmiary obramowań są obliczane w odniesieniu do rozmiaru obrazu. Poziomo względem szerokości, pionowo - względem wysokości.
wypełnić	Wartość jest wskazywana wraz z liczbą lub procentem. Jeśli określono, obraz nie jest obcinany przez wewnętrzną krawędź ramki, ale wypełnia również obszar wewnątrz ramki.
wstępny	Ustawia tę właściwość na wartość domyślną.
dziedziczyć	Dziedziczy wartość tej właściwości z elementu nadrzędnego.

Składnia

Div (wycinek obrazu obramowania: 50 20;)
Ryż. 4. Przykład określenia wycinków ramki obrazu

2.4. powtórzenie obrazu granicznego

Ta właściwość kontroluje sposób, w jaki obraz tła wypełnia przestrzeń pomiędzy narożnikami ramki. Można określić przy użyciu pojedynczej wartości lub pary wartości.

Składnia

Div (powtórzenie obrazu obramowania: powtórz;) Ryc. 5. Przykład powtórzenia środkowej części ramki obrazu przy użyciu różnych typów wartości

2.5. początek obrazu granicznego

Właściwość umożliwia przesunięcie ramki obrazu poza granice elementu o określoną długość. Można określić za pomocą jednej lub czterech wartości.

Składnia

Div (początkowy obraz obramowania: 10px;)
Ryż. 6. Przykład przesuwania ramki obrazu przy użyciu różnych typów wartości

3. Przesunięcie konturu ramy zewnętrznej

Właściwość określa odległość pomiędzy krawędzią elementu obramowania a krawędzią zewnętrzną utworzoną za pomocą właściwości konspektu.

/*Rysunek 1:*/ img ( obramowanie: 1px jednolity róż; kontur: 1px przerywana szarość; przesunięcie konturu: 3px; ) /*Rysunek 2:*/ img ( szerokość obramowania: 1px 10px; styl obramowania: jednolity; kolor obramowania: różowy; kontur: 1 px przerywana szarość; przesunięcie konturu: 3 px; ) /*Rysunek 3:*/ img ( obramowanie: 3 px wstawka w kolorze różowym; kontur: 1 px przerywana szarość; przesunięcie konturu: 1 px; )
Ryż. 7. Przykład zdobienia obrazu ramą zewnętrzną

4. Ramka gradientowa

Wartością border-image może być nie tylko obraz, ale także wypełnienie gradientowe.

Przezroczysta ramka

Jeden z kolorów jest przezroczysty. W ten sposób możesz ustawić granice dla wszystkich stron elementu jednocześnie lub osobno dla każdej strony. Grubość granicy jest kontrolowana przez właściwość border-width.

* (box-sizing:border-box;).wrap ( wysokość: 200px; dopełnienie: 25px; tło: #00E4F6; ) .gradient ( wysokość: 150px; szerokość: 50%; margines: 0 auto; obramowanie: 10px stałe przezroczyste ; obraz obramowania: gradient liniowy (w prawo, przezroczysty 0%, #ADF2F7 100%); wycinek obrazu obramowania: 1; )

Koperta pocztowa

* (box-sizing:border-box;).wrap ( wysokość: 200px; dopełnienie: 25px; ) .gradient ( wysokość: 150px; szerokość: 50%; margines: 0 auto; obramowanie: 10px stałe przezroczyste; obraz obramowania: 10 powtarzalnych gradientów liniowych (45 stopni, #A7CECC, #A7CECC 10px, przezroczysty 10px, przezroczysty 20px, #F8463F 20px, #F8463F 30px, przezroczysty 30px, przezroczysty 40px); )

Zaokrąglone rogi w CSSie można to zrobić na wiele, bardzo wiele sposobów, a niektóre z nich można uznać za przestarzałe, ponieważ CSS 3 wprowadził nowe właściwości, które pozwalają na zaokrąglanie rogów elementów HTML. Jednak po pierwsze, starsze przeglądarki nie obsługują tych właściwości, a po drugie, w kreatywnym mózgu projektanta czasami rodzą się takie pomysły, które mogą uratować tylko stare metody. Dlatego tutaj przyjrzymy się kilku różnym opcjom tworzenia zaokrąglonych rogów w CSS: od najprostszych do dość skomplikowanych.

W tych przykładach narożniki początkowych elementów blokowych są zaokrąglone, a w niektórych przykładach te bloki służą jako elementy pomocnicze. Pamiętaj jednak, że możesz z łatwością zrobić to samo z elementami liniowymi, ustawiając je wstępnie za pomocą bloku lub bloku inline, jeśli to konieczne.

Zaokrąglone rogi w CSS 3 bez obrazów

W tym przykładzie wykorzystano właściwości CSS 3, które umożliwiają łatwe zaokrąglanie narożników bez pomocy obrazów.

Przykład HTML i CSS: Zaokrąglanie narożników za pomocą CSS 3 bez obrazów

Opis przykładu

1. Do zaokrąglania narożników używamy Właściwość CSS 3, który jest zrozumiały dla wszystkich nowoczesnych przeglądarek.
2. W przypadku starszych przeglądarek Firefox, Chrome i Safari używamy specjalnych właściwości z przedrostkami -moz- i -webkit-, które pojawiły się przed obsługą głównej właściwości. Niestety nie ma podobnych odpowiedników dla starej Opery i IE. Należy pamiętać, że podczas tworzenia złożonych krzywych właściwości z przedrostkami mogą nie działać poprawnie. Dlatego w kodzie CSS zostały one wymienione wyżej niż główna właściwość, tak że zgodnie priorytety stylu, przeglądarki, które już rozumieją „czysty”, korzystały z niego.

Właściwości z przedrostkami nie są uwzględnione w specyfikacji CSS, więc użycie ich spowoduje nieprawidłowy kod.

Zaokrąglone rogi w CSS bez obrazów

Ten przykład również nie zawiera obrazów, ale wykorzystuje dodatkowe bloki. Istota metody polega na tym, że przed i po treści głównej wskazuje się kilka bloków, które w miarę oddalania się od niej stopniowo zmniejszają szerokość, wykorzystując boczne marginesy zewnętrzne. Dzięki temu powstaje imitacja zaokrągleń narożników.

Ta metoda jest zła, ponieważ kod jest „zaśmiecony” dodatkowe bloki, ale niestety w wielu przykładach takie bloki będą obecne. Kolejnym minusem jest to, kiedy duże promienie zaokrąglenia, będziesz musiał dodać jeszcze więcej bloków niż w przykładzie.

Przykład HTML i CSS: zaokrąglanie narożników bez użycia obrazów

Opis przykładu

1. Wewnątrz bloku za pomocą class = „block” wskazujemy element głównej treści („content_block”), przed którym umieszczamy bloki symulujące zaokrąglanie rogów („b1”, „b2”, „b3” ). Następnie umieszczamy je w ten sam sposób, ale w odwrotnej kolejności.
2. Ustawiamy bloki symulacyjne na wymaganą wysokość i marginesy boczne (CSS), aby stworzyć wygląd narożników. Resetujemy także ich rozmiar czcionki (CSS) i ustawiamy go na :hidden — jest to przeznaczone dla starszych przeglądarek, które mogą zwiększyć wysokość i sprawić, że będzie większa niż określona.
3. W tym przykładzie oprócz zaokrąglenia rogów dodano także imitację ramki.Jeśli jej nie potrzebujesz, po prostu usuń wszystkie „obramowania” z elementów i usuń z bloku „b3” kolor tła.

Najłatwiejszym sposobem na uzyskanie zaokrąglonych rogów w CSS jest użycie obrazu jako tła elementu. W takim przypadku wymiary elementu są zwykle podawane tak samo, jak rozmiar obrazu tła. Wadą tej metody jest to, że zawartość elementu nie powinna wykraczać poza jego zakres, czyli powinna mieć pewien ograniczony rozmiar.

Przykład HTML i CSS: Zaokrąglanie narożników za pomocą jednego obrazu

Opis przykładu

1. Korzystając z właściwości CSS, ustawiamy obraz tła dla bloku, którego replikacji w pionie i poziomie zabraniamy (no-repeat), gdyż w tym przypadku nie jest to wymagane.
2. Aby tekst wewnątrz bloku nie dotykał jego krawędzi, ustawiamy jego dopełnienie (CSS) na 5 pikseli z każdej strony.
3. Następnie musisz ustawić blok na takie same wymiary jak tło. Nasz obraz tła ma wymiary 140x32 piksele, ale podajemy szerokość (CSS) i wysokość (CSS) samego bloku, pomniejszoną o 10px. Musiałem go zmniejszyć ze względu na te same wewnętrzne dopełnienia, które również rozszerzają element o 5 pikseli w każdym kierunku.

W poprzednim przykładzie rozmiar bloku był stały i zależał od rozmiaru obrazu tła, co jest bardzo niewygodne. Teraz sprawimy, że szerokość naszego bloku będzie zmieniana. Aby to zrobić, wytnij trzy części obrazu - boki i kawałek środka. Następnie wewnątrz głównego bloku umieścimy dwa elementy o ustalonych rozmiarach, które dzięki absolutnemu pozycjonowaniu zostaną rozłożone na jego bokach. Dajmy im te same części boczne co tło i część środkową dla głównego bloku. W ten sposób otrzymamy blok z zaokrąglonymi narożnikami i zmienną szerokością.

Technikę tę bardzo często stosuje się do zaokrąglania elementów jednoliniowych, takich jak linki czy tytuły sekcji/menu.

Przykład HTML i CSS: zaokrąglanie narożników za pomocą bloków bocznych

Opis przykładu

1. Wewnątrz bloku class = "block" umieszczamy dwa elementy - "left_bok" i "right_bok", do których ustawiamy obrazy części bocznych jako tło (CSS) i zakazujemy ich reprodukcji (no-repeat). Dla samego głównego bloku ustawiamy tło z części środkowej i pozwalamy na jego powielanie tylko w poziomie (powtórz-x).
2. Szerokość bloków bocznych podajemy odpowiednio do wielkości tła, u nas jest to 14x32 piksele. Jednak dla głównego bloku, podobnie jak w poprzednim przykładzie, ustawiliśmy wysokość na 22 piksele, aby skompensować pionowe wypełnienie.
3. Umieścimy nasze ściany boczne względem „bloku”, więc określimy :relative dla niego i bezwzględny dla samych ścian bocznych. Cóż, następnie dociskamy je do odpowiednich boków rodzica, korzystając z właściwości CSS i .
4. Aby zapobiec ukrywaniu zawartości bloku pod obrazami bocznymi, ustawiamy „blok” tak, aby miał boczne dopełnienie (CSS), które może być równe lub nieco większe od samych boków. Ustawiamy także małe marginesy na górze i na dole, aby tekst nie „kleił się” do krawędzi.

W IE6 występuje mały błąd związany z tą metodą:

Jeśli szerokość lub wysokość „bloku” będzie nieparzysta, to pomiędzy wewnętrzną krawędzią bloku a prawym bocznym panelem pojawi się nieprzyjemne wcięcie o wielkości 1px, które zepsuje cały obraz. Ten błąd można naprawić za pomocą Włamanie do CSS z pewnym wyrażeniem, ale nawet nie podam tutaj takiego przykładu, ponieważ często zawiesza przeglądarkę i lepiej z niej nie korzystać.

Zróbmy to inaczej. Ustawmy lewy margines (CSS) „right_bok” na 100% tak, aby wysunął się poza prawą granicę głównego bloku, a następnie zwróć go z powrotem, przesuwając go w lewo o liczbę pikseli równą jego szerokości. IE6 działa poprawnie z wartościami tych właściwości, więc nie ma innego wyjścia, jak tylko umieścić blok tam, gdzie go potrzebujemy.

Ta metoda zaokrąglania narożników jest podobna do poprzedniej, ale w przeciwieństwie do niej, tutaj to nie elementy HTML są umieszczane po bokach, ale te dodawane do głównego bloku pseudoelementy. Dzięki takiemu podejściu udało się pozbyć niepotrzebnego kodu HTML strony.

Przykład HTML i CSS: Zaokrąglanie narożników za pomocą pseudoelementów bocznych

Opis przykładu

1. Używając pseudoelementów CSS wskazujemy, że chcemy dodać coś na początku i na końcu głównego bloku. I korzystając z właściwości CSS, po prostu dodajemy niezbędne obrazy zaokrąglonych narożników, a raczej boków. Stworzyliśmy więc dwa pseudoelementy z obrazami.
2. No cóż, wtedy robimy dokładnie to samo, co w poprzednim przykładzie, tyle że pracujemy z utworzonymi pseudoelementami.

W przypadku IE6 i IE7 w tym przykładzie użyto następujących „kul”:

1. Jak wiadomo, IE6 i IE7 nie rozumieją użytych tutaj pseudoelementów, dlatego wykonujemy następujące czynności. Używamy wyrażenia, które integruje dwa znaczniki wewnątrz głównego elementu i nadajemy im takie same style jak w poprzednim przykładzie. Należy pamiętać, że wstrzyknięty kod, który następuje po pierwszym internalHTML, jest dodawany bezpośrednio po otwierającym tagu „block”, a po drugim internalHTML jest dodawany przed tagiem zamykającym. Tak, w naszym przypadku nie ma to znaczenia, ponieważ stosuje się pozycjonowanie absolutne, ale czasami warto o tym wiedzieć.
2. Aby zapobiec zobaczeniu tego kodu przez inne przeglądarki, załączamy go w komentarze warunkowe. Najlepiej byłoby umieścić go w osobnym pliku CSS, który jest połączony tagiem zamkniętym z tymi samymi komentarzami.

Zaokrąglone rogi w CSS przy użyciu zawijania bloków

Istota tej metody polega na tym, że najpierw wycina się rogi obrazu. Następnie wewnątrz głównego bloku umieszcza się kilka kolejnych bloków (w zależności od liczby rogów), które są zagnieżdżone jeden w drugim. Każdy z nich otrzymuje jeden róg obrazu jako tło. Zabrania się reprodukowania obrazów, a współrzędne podano tak, aby zajmowały miejsca w rogach bloków. W ten sposób uzyskuje się efekt zaokrąglonych narożników.

Przykład HTML i CSS: zaokrąglanie narożników za pomocą zawijania bloków

Opis przykładu

1. Wewnątrz głównego bloku umieszczamy jeszcze cztery. Ponieważ żaden z tych bloków nie ma marginesów ani obramowań, a tylko najbardziej wewnętrzny ma wcięcia, wszystkie mają taką samą wysokość i szerokość.
2. Korzystając z właściwości CSS, ustawiamy każdy z wewnętrznych bloków w narożniku jako tło, uniemożliwiamy ich reprodukcję i umieszczamy w rogach bloków. A ponieważ kolor tła elementów jest przezroczysty, wszystkie cztery rogi tła są widoczne na stronie.
3. Dodaj żądany kolor tła do zewnętrznego bloku za pomocą narożnika. Wszystko jest gotowe.

Możesz jawnie ustawić szerokość bloku, określając żądaną właściwość w class="block" , ale aby zmienić wysokość, musisz użyć najbardziej wewnętrznego elementu (dla nas jest to „rb”).

Zaokrąglone rogi w CSS przy użyciu pozycjonowania

Tutaj również wycięte są rogi tła, które zostaną zaznaczone na małych blokach. Korzystając z pozycjonowania bezwzględnego CSS, bloki te są umieszczane w rogach głównego elementu żądany kolor tło.

Przykład HTML i CSS: Zaokrąglanie narożników za pomocą pozycjonowania

Opis przykładu

1. Wewnątrz głównego elementu (class= "block") umieszczamy cztery znaczniki z klasami "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" , które będą pełnić rolę bloków narożnych.
2. Korzystając z właściwości CSS, łączymy własny obraz tła z każdym blokiem narożnym i nadajemy mu szerokość i wysokość równą tym rozmiarom zdjęcia tła. Na wszelki wypadek resetujemy rozmiar czcionki (CSS) i odcinamy nadmiar (CSS).
3. Podajemy względne pozycjonowanie dla głównego elementu (CSS:relative), ponieważ będziemy pozycjonować bloki narożne względem niego, a dla samych narożników - absolutne (absolutne).
4. Korzystając z właściwości CSS i , określamy odległości przesunięć w pionie i poziomie dla bloków narożnych, tak aby znajdowały się one w rogach głównego bloku.

Ta metoda w IE6 wiąże się z kilkoma problemami:

1. Jeśli szerokość „bloku” nie zostanie wyraźnie określona, ​​narożniki po lewej stronie nie będą pasować. Powodem tego jest obecność wewnętrznej wyściółki w bloku. Najprostszym sposobem rozwiązania problemu jest usunięcie wcięcia i zamknięcie głównej zawartości „bloku” (bez narożników) w dodatkowym opakowaniu bloku, a następnie określenie wymaganego wcięcia w opakowaniu. Ale tutaj zrobiłem to inaczej, włączając układ za pomocą właściwości zoom:1, która mówi IE6, aby wyświetlał element w jego naturalnym rozmiarze. Ta właściwość jest nieprawidłowa, więc jeśli zdecydujesz się z niej skorzystać, zalecam wykonanie połączenia za pośrednictwem komentarze warunkowe.
2. Ten sam jednopikselowy błąd, który został omówiony powyżej. Ale tutaj luki mogą tworzyć się nie tylko między prawymi rogami i prawa strona blok, ale także poniżej. A jeśli pozbędziemy się luk po prawej stronie, to nie zadziała to z dolnymi. Rozwiązaniem jest jawne określenie równej szerokości i wysokości głównego elementu. Możesz także ustawić wartości nieparzyste, ale wtedy będziesz musiał ustawić odległości przesunięcia w dół i w prawo na nie zero, ale -1px.

Zasadniczo technologia tej metody zaokrąglania narożników w CSS jest taka sama jak poprzednia, dlatego szczegółowe komentarze zostaną tutaj pominięte. Jedyna różnica polega na tym, że zamiast oddzielnych obrazów narożników tła, używany jest tutaj jeden wspólny obraz duszka. Dzięki temu strona ładuje się szybciej, bo jeden obraz „waży” mniej niż cztery hosting zamiast czterech jest jedno odwołanie.

Sprite to obraz będący połączeniem kilku obrazów służących jako tło dla elementów serwisu. To, która część duszka będzie tłem konkretnego elementu HTML, zależy od współrzędnych określonych w specjalnej właściwości CSS.

Przykład HTML i CSS: Zaokrąglanie narożników za pomocą pozycjonowania i sprite'ów

Opis przykładu

1. Wykorzystując właściwość CSS, łączymy obraz duszka tła z blokami narożnymi, który ma okrągły kształt o wymiarach 22x22 pikseli (11x11 pikseli na każdą ćwiartkę rogu).
2. Korzystając z właściwości CSS, określamy współrzędne przesunięcia tła. Na przykład wartość -11px 0 oznacza, że ​​tło będzie przesunięte w lewo o 11px na osi X, ale nie przesunięte na osi Y. Tym samym lewa połowa duszka wychodzi poza granicę elementu i pozostaje tylko prawa. Ale jest on widoczny tylko w połowie, ponieważ jego wysokość wynosi 22 piksele, a wysokość samego bloku narożnego wynosi tylko 11 pikseli. Okazuje się więc, że kiedy podana wartość Tłem elementu będzie prawa górna ćwiartka duszka.

W IE6 występują te same problemy, co w poprzednim przykładzie.

W tym przykładzie zaokrąglimy rogi elementu, który ma obramowanie, ale nie jest to specyficzna cecha tej konkretnej metody - spokojnie można zastosować zaokrąglenie z obramowaniem w poprzednich przykładach.

Same zaokrąglenia wykonamy wykorzystując pseudoelementy utworzone z głównego bloku, ale bez nanoszenia na nie pozycjonowania.

I jedna chwila. W poprzednich przykładach narożniki zostały wycięte wraz z tłem w środku, co nie zawsze jest konieczne, szczególnie jeśli oczekuje się, że tło bryły o zaokrąglonych rogach będzie niejednolite. Dlatego tło wewnątrz ramki tutaj stało się przezroczyste (pozwala to na formacie PNG) i kiedy wycięto rogi - ich wewnętrzna część również okazał się przezroczysty. Jeśli zajdzie taka potrzeba, możesz również zastosować podobne podejście w poprzednich przykładach.

Przykład HTML i CSS: Zaokrąglanie narożników przy użyciu pseudoelementów

tło i za jego pomocą umieszczamy je w prawa strona i zabraniamy „reprodukcji”. To wszystko, rogi są gotowe.

Ponieważ określiliśmy dopełnienie dla „bloku” (CSS), pseudoelementy, a zatem i rogi, nie są zlokalizowane w rogach bloku, ale są oddalone o 15 pikseli od krawędzi. Aby to naprawić, dajemy pseudoelementom ujemne marginesy (CSS) po niezbędnych stronach, aby umieścić je nad wcięciami. Ale ustawiamy marginesy na nie 15, ale 17px, jest to konieczne do pokrycia ramki (CSS), której szerokość wynosi 2px (15+2=17). To tyle.

W przypadku IE6 i IE7 zastosowaliśmy znane już „kule” z wstrzyknięciem kodu HTML, ponieważ te przeglądarki nie rozumieją użytych tutaj pseudoelementów:

1. Za pomocą wyrażenia integrujemy wewnątrz głównego elementu dwa znaczniki, które również konwertujemy na bloki. Następnie umieszczamy w nich jeden znacznik. A następnie te znaczniki mają takie same właściwości jak pseudoelementy. Tyle, że dodatkowo dodajemy właściwość CSS :relative, bez której ramka zachodzi na rogi.

Wadą tej metody jest to, że nie można jednoznacznie ustawić wysokości bloku z zaokrąglonymi rogami, ponieważ jeśli przekroczy on rozmiar zawartości, to dolne rogi nie będą dociskane do krawędzi. Można tego uniknąć, jeśli nadal umieścisz główną treść w innym bloku i ustawisz jej wysokość.

Kolejny przykład zaokrąglania narożników pseudoelementami i bez dodatkowych bloków

Ten przykład jest podobny do poprzedniego, ale tutaj używamy pozycjonowania, aby rozmieścić pseudoelementy. Dzięki takiemu podejściu możliwe stało się jednoznaczne określenie wysokości bryły z zaokrąglonymi narożnikami.

Przykład HTML i CSS: Zaokrąglanie narożników, gdzie można zmienić wysokość bloku

I znowu dla IE6 i IE7 dodajemy kilka dodatkowe elementy używając wyrażeń i zamykając kod w komentarzach warunkowych. Tylko tym razem nie będziemy nawet próbować emulować pseudoelementów, ale zrobimy to prościej.

1. Dodajemy cztery tagi wewnątrz „block” i stosujemy do nich pozycjonowanie. Następnie po prostu pokazujemy im rogi obrazu jako tło i umieszczamy je w rogach głównego elementu. Oznacza to, że postępujemy dokładnie tak, jak w jednej z metod omówionych powyżej.
2. Aby pozbyć się błędu jednopikselowego (o którym wspomniano powyżej nie raz), dodaj lewy margines (CSS) o wartości 100% i ujemnym przesunięciu równym -9px do prawych elementów narożnych. Ogólnie, jeśli pamiętasz, to przesunięcie powinno być równe szerokości bloku narożnego (u nas jest to 11px), ale nie zapomnij o obramowaniu 2px, które tutaj mamy - musimy umieścić na nim rogi (11px-2px=9px).

Swoją drogą, łatwiej byłoby emulować pseudoelementy, tak jak to zrobiliśmy w poprzednim przykładzie - tak kod rozszerzenia byłby mniejszy. Ale nie w IE6, ta przeglądarka potrzebowałaby jeszcze kilku „kul” i w rezultacie musiałaby napisać dwie osobne komentarze warunkowe- dla IE6 i IE7, a to tylko rozdęłoby kod...

W przeglądarce Firefox ta metoda działa poprawnie od wersji 3.6, aw Operze - od wersji 10.0 nie wymyśliłem dla nich kul, ponieważ nie ma to większego znaczenia.

W Internecie istnieje wiele przykładów i tutoriali dotyczących zaokrąglania rogów bloku lub tabeli, ale z reguły te tutoriale opierają się na wykorzystaniu obrazów lub zastosowaniu dodatkowych bloków.

W dzisiejszym tutorialu pokażę Ci jak możesz narożniki okrągłego stołu przy użyciu wyłącznie CSS.

Znaczniki bezpośrednie (Druga tabela różni się układem komórek w Górna linia):

Curabitur a ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor przedsionek.	0

Brak ciąży.	Urna Augue.	Nunc iaculis bibendum.
		Przedsionek tymczasowy	Laoreet eros semper ut.
Vivamus quis nisi lacus.	Cras id felis eu purus tempor dictum in at lorem.	facilisis iaculis magna diam id quam. eleifend.	Pellentesque cursus, nunc ut facilisis hendrerit

1. Zaokrąglij rogi bezpośrednio przy stole (oznaczenie stołu).

BContentTables( obramowanie: 1px solid #CCCCCC; szerokość: 100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ przepełnienie: ukryte ; margines: 0,7em auto; )

2. Usuń tło z pierwszej linii.

Tr.bCTable_Header (tło: brak;)

3. Używając pseudoklasy:pierwsze dziecko i kombinatora > wybierz pierwszą komórkę w tabeli. Zaokrąglij lewy górny róg pierwszej komórki. Tło pierwszego rzędu składa się z tła komórek tego rzędu.

Tr.bCTable_Header:first-child > td:first-child(border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- promień-border: 10px 0 0 0; -o-promień-border: 10px 0 0 0; -khtml-promień-border: 10px 0 0 0; ) tr.bCTable_Header td( kolor:biały; rozmiar czcionki:110%; kolor tła:#00843C;)

4. Używając pseudoklasy:ostatnie-dziecko i kombinatora > wybierz ostatnią komórkę w pierwszym wierszu. W tym celu zaokrąglamy prawy górny róg.

Tr.bCTable_Header:pierwsze-dziecko > td:ostatnie-dziecko(promień-obramowania:0 10px 0 0; -webkit-promień-borderu:0 10px 0 0; -moz-promień-bordera:0 10px 0 0; -ms- promień-obramowania: 0 10px 0 0; -o-promień-obramowania: 0 10px 0 0; -khtml-promień-obramowania: 0 10px 0 0; )

5. Zaokrąglij dolne rogi ostatniej linii. Nie zapomnij usunąć tła z ostatniej linii; Tło wiersza jest ustalane na podstawie tła komórek ostatniego wiersza.

BContentTables tr:last-child( promień-obramowania: 0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-promień: 0 0 10px 10px; -o-border-promień: 0 0 10px 10px; -khtml-border-promień: 0 0 10px 10px; tło: brak; )

6. Następnie analogicznie do punktów 3-4 w Ostatni wiersz zaokrąglij rogi pierwszej i ostatniej komórki.

BContentTables tr:ostatnie-dziecko td(kolor tła:#F1F1F2;) .bContentTables tr:ostatnie-dziecko td:pierwsze-dziecko(border-promień:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-promień:0 0 0 10px; -ms-border-promień: 0 0 0 10px; -o-border-promień:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;) . bContentTables tr:last-child td:last-child (border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0; -moz-border-radius: 0 0 10px 0; -ms-border- promień: 0 0 10px 0; -o-border-promień: 0 0 10px 0; -khtml-border-promień: 0 0 10px 0; )

Obsługa przeglądarki

Kiedy większość programistów słyszy wyrażenie „zaokrąglone rogi”, zaczyna się denerwować. Jest to oczywiście decyzja projektowa. Czasami wygląda to całkiem przyzwoicie, ale rysując zaokrąglone rogi wielu projektantów nie zastanawiało się wcześniej, jak bardzo zwiększa się kod HTML strony.

Teraz programiści mogą odpocząć i nie denerwować się, jeśli chodzi o tworzenie zaokrąglonych narożników na blokach. Dzisiaj podam przykład rozwiązania tego problemu za pomocą tylko jednego elementu div przy użyciu nowych funkcji CSS3.

Jeśli pamiętasz, jak wyglądały stare metody:

1. Korzystanie z tabel W najgorszym przypadku blok można było przesuwać nie tylko w pionie, ale także w poziomie, wtedy otrzymaliśmy tabelę z 9 komórkami, dla każdej z których zostało ustawione tło: odcięta część odpowiedniego obszaru ramki. I wszystko było w porządku, jeśli wewnętrzne tło nie było gradientowe lub nie było cieni poza ramką, jeśli tło strony nie było jednolite.
2. Używanie kilku bloków div. To samo przy skalowaniu bloku w poziomie i w pionie konieczne było użycie co najmniej 8 divów zagnieżdżonych jeden w drugim.
3. Były też bardziej egzotyczne sposoby. 🙂

Zaokrąglanie narożników za pomocą CSS3

Wreszcie mamy możliwość znacznego uproszczenia ten proces. Większość recenzentów popiera obecnie zaokrąglone rogi, aczkolwiek z zastrzeżeniami.

Na stronie mamy kod HTML:

Kod CSS, który zaokrągla nasze rogi to:

Div.block (wyświetlanie: blok; margines: 5px; dopełnienie: 0px; obramowanie: 1px bryła #989898; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-promień: 5px; kolor tła : #FFF; )

Z powyższego kodu za zaokrąglanie odpowiadają tylko następujące linie:

Promień granicy Moz: 5px; -webkit-border-radius: 5px; promień obramowania: 5px;

Właściwie podałem najprostszy przykład, w którym wszystkie rogi mają ten sam promień. Chociaż jest to możliwe w Przeglądarki FireFox i Webkit (Safari, Chrome) konfigurują różne promienie dla określonych narożników lub nawet zmienny promień dla jednego narożnika, jak zawsze Opera i IE wyprzedzają resztę, a raczej z tyłu. Te funkcje nie działają w tych przeglądarkach. Dlatego myślę, że warto wrócić do tej kwestii, gdy funkcja ta będzie już wszędzie działać w pełni.

Dzień dobry, popołudnie, wieczór i noc wszystkim. Dmitry Kostin jest z tobą raz po raz. Jakimś cudem przeglądałem różne zdjęcia i potem niektóre z nich mi się spodobały. I lubili je, bo miały zaokrąglone krawędzie. Od razu wygląda ciekawiej. Nie sądzisz tak? Dlatego też na dzisiejszej lekcji podpowiem Wam, jak zaokrąglać rogi w Photoshopie, żeby zdjęcie wyglądało ciekawiej.

W Photoshopie podoba mi się to, że w wielu przypadkach to samo można zrobić na kilka sposobów. Więc to jest tutaj. Zacznijmy od naszego Photoshopa.

Wygładzanie za pomocą obramowań

Ta metoda jest podobna do poprzedniej, ale wciąż bardzo się różni. Zrobimy wszystko z tym samym obrazem.

Tworząc kształt

Trzecia metoda już radykalnie różni się od dwóch poprzednich. Więc zrób sobie przerwę na kilka sekund i idź dalej. Nie zmienię obrazu i ponownie załaduję ten samochód do Photoshopa.

Czy widzisz, z czym skończyłeś? Obraz ma zaokrąglone krawędzie, a wszystko dlatego, że wyświetla się tylko tam, gdzie znajduje się nasz narysowany zaokrąglony prostokąt. Ale teraz możesz przyciąć dodatkowe zdjęcie za pomocą narzędzia Ramka lub możesz od razu zapisać zdjęcie i będziesz mieć już osobny obraz z zaokrąglonymi rogami.

Spróbuj zrobić wszystko sam, a jednocześnie powiedz mi, która z przedstawionych metod jest dla Ciebie bardziej preferowana.

A tak przy okazji, jeśli masz luki w Photoshopie lub po prostu chcesz go w pełni zbadać tak szybko, jak to możliwe, to gorąco polecam obejrzenie jednego świetny kurs Photoshopa dla początkujących. Kurs jest dobrze przeprowadzony, wszystko jest świetnie opowiedziane i pokazane, a każdy materiał jest szczegółowo omówiony.

No cóż, kończę dzisiejszą lekcję. Nie zapomnij subskrybować nowych artykułów i udostępniać je znajomym. Miło mi było Cię zobaczyć na moim blogu. Znowu na ciebie czekam. PA pa.

Pozdrawiam, Dmitrij Kostin