Елементи з заокругленнями без використання графіки
5 січня 2008
Зара дуже модно (та до чого тут мода - це просто гарно!) використовувати в оформленні різні заокруглення. І, як виявляється, можна використовувати їх будь-де, не вдаваючись до графіки, відповідно, не треба паритись, чи не з'їде шосьтамкудисьнетуди в браузері всіх часів і народів - інтернет експлорері 
Цей приклад побудовано на основі методики, що застовується в гуглівській пошті.
Отже, першою справою додаємо стилі:
- /* стилі для закругленнь */
- .inner-box {
- padding:1em;
- }
- .r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
- display: block;
- height: 1px;
- overflow: hidden;
- font-size:1px;
- }
- .r10 { margin: 0 10px; }
- .r9 { margin: 0 9px; }
- .r8 { margin: 0 8px; }
- .r7 { margin: 0 7px; }
- .r6 { margin: 0 6px; }
- .r5 { margin: 0 5px; }
- .r4 { margin: 0 4px; }
- .r3 { margin: 0 3px; }
- .r2 { margin: 0 2px; }
- .r1 { margin: 0 1px; }
- /*
- можливі комбінації
- r3 r1 r1 зверху
- r1 r1 r3 знизу
- r5 r3 r2 r1 r1 зверху
- r1 r1 r2 r3 r5 знизу
- r10 r7 r5 r4 r3 r2 r2 r1 r1 r1 зверху
- r1 r1 r1 r2 r2 r3 r4 r5 r7 r10 знизу
- однак не слід обмежуватись лише цими варіантами,
- можливі і інші комбінації та багато інших ефектів.
- */
- #rounded-box-3, #rounded-box-5, #rounded-box-10 { margin:1em; }
- .inner-box, b { background-color: #43CD80; }
- /* зменшуємо відступи по мірі збільшення радіусу заокруглення */
- #rounded-box-3 .inner-box { padding: 1em;}
- #rounded-box-5 .inner-box { padding: 0.7em 1em;}
- #rounded-box-10 .inner-box { padding: 0.4em 1em;}
- /* кінець стилів для заокруглень */
Я думаю, якщо ви вже взялися це робити, то зможете і без моїх підказок знайти місце, в якому можна задати власний колір фону
А далі - все просто: дивимося в стилях місце, позначене підказкою "можливі комбінації", відповідно, оточуємо наш контент відповідною кількістю div'iв з відповідними назвами. В результаті експериментів отримаємо різні кути заокруглення. Наприклад:
- <div id="rounded-box-10">
- <b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b><div class="inner-box">Наш контент<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dolor diam, condimentum sed, rhoncus in, adipiscing ut, pede. Mauris blandit fringilla quam. Praesent rutrum semper mi. Nam vulputate. Integer eu pede a turpis hendrerit placerat. Nam ac dolor mollis arcu gravida blandit. In a metus. Mauris nulla ipsum, hendrerit ac, porta id, tincidunt ac, enim. Morbi blandit pede non mi. In convallis eros vel leo.</div><b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>
- </div>
Отримаємо:
Tеги: Кодінг, Корисностi
Я не знаю, що ви тут робите, але раз вже так сталося, можливо, ви б хотіли знайти певний мінімум про автора цього інтернет-творіння :) Отже, мене звуть Міха (за паспортом - Михайло), мені 23 роки і я маю купу інтересів, серед яких найбільш чітко проявляються музика (бринькання на всяких гітарах-брабанах і обожнювання Девіда Гілмора), розробка сайтів та охорона Природи (так, я пишу це слово з великої літери!).
7 січня 2008 в 1:09
треба буде спробувати цей метод, дякую
п.с. в записах можна оформити цитати таким чином
7 січня 2008 в 1:37
Блін, код не вставляється, схоже, в коменти…
7 січня 2008 в 3:45
Це все звісно гарно, але з тими всіма b,b,b.. хтмл-код вже не дуже семантичний.
7 січня 2008 в 3:53
Воно одразу видно, що негарний, зате можна швидко все зробити і точно нічого не буде розлазитись - ширина і висота блоку можуть бути будь-які… Та й можна використовувати різні кути заокруглень…
Не знаю, як на мене, має право на життя цей спосіб…
12 січня 2008 в 5:55
[...] 3. Цікавий прийом від Міхи - Елементи з заокругленнями без використання графіки [...]