Елементи з заокругленнями без використання графіки

5 січня 2008

Зара дуже модно (та до чого тут мода - це просто гарно!) використовувати в оформленні різні заокруглення. І, як виявляється, можна використовувати їх будь-де, не вдаваючись до графіки, відповідно, не треба паритись, чи не з’їде шосьтамкудисьнетуди в браузері всіх часів і народів - інтернет експлорері :)
Цей приклад побудовано на основі методики, що застовується в гуглівській пошті.
Отже, першою справою додаємо стилі:

  1. /* стилі для закругленнь */
  2.  
  3. .inner-box {
  4. padding:1em;
  5. }
  6.  
  7. .r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
  8. display: block;
  9. height: 1px;
  10. overflow: hidden;
  11. font-size:1px;
  12. }
  13.  
  14. .r10 { margin: 0 10px; }
  15. .r9 { margin: 0 9px; }
  16. .r8 { margin: 0 8px; }
  17. .r7 { margin: 0 7px; }
  18. .r6 { margin: 0 6px; }
  19. .r5 { margin: 0 5px; }
  20. .r4 { margin: 0 4px; }
  21. .r3 { margin: 0 3px; }
  22. .r2 { margin: 0 2px; }
  23. .r1 { margin: 0 1px; }
  24.  
  25. /*
  26.  
  27. можливі комбінації
  28.  
  29. r3 r1 r1 зверху
  30. r1 r1 r3 знизу
  31.  
  32. r5 r3 r2 r1 r1 зверху
  33. r1 r1 r2 r3 r5 знизу
  34.  
  35. r10 r7 r5 r4 r3 r2 r2 r1 r1 r1 зверху
  36. r1 r1 r1 r2 r2 r3 r4 r5 r7 r10 знизу
  37.  
  38. однак не слід обмежуватись лише цими варіантами,
  39.  
  40. можливі і інші комбінації та багато інших ефектів.
  41.  
  42. */
  43.  
  44. #rounded-box-3, #rounded-box-5, #rounded-box-10 { margin:1em; }
  45.  
  46. .inner-box, b { background-color: #43CD80; }
  47.  
  48. /* зменшуємо відступи по мірі збільшення радіусу заокруглення */
  49. #rounded-box-3 .inner-box { padding: 1em;}
  50. #rounded-box-5 .inner-box { padding: 0.7em 1em;}
  51. #rounded-box-10 .inner-box { padding: 0.4em 1em;}
  52. /* кінець стилів для заокруглень */

Я думаю, якщо ви вже взялися це робити, то зможете і без моїх підказок знайти місце, в якому можна задати власний колір фону :)
А далі - все просто: дивимося в стилях місце, позначене підказкою “можливі комбінації”, відповідно, оточуємо наш контент відповідною кількістю div’iв з відповідними назвами. В результаті експериментів отримаємо різні кути заокруглення. Наприклад:

  1. <div id="rounded-box-10">
  2. <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>
  3. </div>

Отримаємо:

От і все! Єдине, що не завжди можна додати цей код з дівами безпосередньо в пост, але для використання в сайдбарі чи оформлення будь-яких елементів теми дизайну немає ніяких обмежень, окрім вашої фантазії!

Коментарів : 5

Для таких, як я [Русько-украйонська]

30 грудня 2007

Є люди, які, живучи в нашій країні, розмовляють російською (нічого проти них не маю), є справжні україномовні патріоти, а є такі, як я - що, в принципі, вважають своєю мовою українську, але за тих чи інших обставин переходять на російську…

Для них - чудова кольорова методичка про те, як же все-таки почати ЗАВЖДИ розмовляти українською.

І хоч ця брошурка була підготовлена ще позаминулого року і була призначена для переходу на українську мову з 2007 року, я думаю, вона лишається актуальною… Принамні, для мене. Може, і ще комусь допоможе…

Отже, “Зроби Україні подарунок до Нового року! З 2008 переходь на українську!“

Написати коментар

GoogleMaps стає люб’язнішим і кращим! [Перевіряємо на прикладі Голосіївського лісу]

26 серпня 2007

Тепер для вставки шматка динамічної катри від GoogleMaps не потрібно ніяких плагінів, апі-кодів та терзань стосовно фунціонування лише на одному з доменів.
Тепр все просто, як на YouTube: вибрали свою діляночку, понаставляли міток (в які, окрім тексту, не те що картинки - відео впихати можна!), можга також виділити якусь площину або намалювати схему проходу-проїзду, вибрали ширину-довжину і за допомогою айфрейм-коду втулили на потрібне місце на сайті…
Отже, тестуємо! Голосієво, Київ. Можна наближати і розглядати. Незабаром додам ще купу міток з розширеними описами і фотками.

Tags: , , , , , ,

Написати коментар

Кроспост

25 червня 2007

Це тестовий запис, який написано з сервісу swiftpen.ru одночасно на три блоги - на liveinternet.ru, mixa-blog.org.ua та до petyakh.livejournal.com
Побачимо, що з цього вийде…

Написати коментар

Редактор WP: 1 хак + 1 плагін

23 червня 2007

Я оновлював свій двигунець спеціально для того, щоб натиснувши в Mozilla Firefox Alt+Shift+V та Alt+V в Internet Explorer можна було бачити ось таке:

Я люблю вирівнювання p align=”justify”, і в цьому редакторі воно є!

А ще Макс пропонує використовувати плагін Advanced TinyMCE Editor, що значно розширює можливості редактора. Відгуки самого Макса також в наявності.

Коментарів : 2

На честь другої рiчницi запуску Gmail: кориснi штуки

1 квітня 2007

Gmail-помешательство: более 30 инструментов и трюков для работы с Gmail

Написати коментар

Як завантажувати відео з YouTube (Мануал для Василюка)

28 березня 2007

На моє велике здивування, залишаються люди, які, активно користуючись інтернетом, не можуть знайти відповідь на питання, що їх цікавить. “Як завантажувати відео з YouTube” - одне з них. Отже, все просто…
На сторінці з відкритим роликом, що нас цікавить, в адресному рядку одразу після “http://www.” дописуємо слово “kiss”. Наприклад, початкова адреса сторінки з роликом http://www.youtube.com/watch?v=ZCkoL7c6Bq8, значить має вийти http://www.kissyoutube.com/watch?v=ZCkoL7c6Bq8.
Все, натискаэмо “ентер” і на сторінці, що відкрилася, завантажуємо флешовий ролик за допомогою лінку “Download Now”
Тепер завантажений ролик (як правило, він має назву get_video) переіменовуємо в те, що нам потрібно, додаючи після назви файлу розширення *flv.
Переглядати усе це діло можна за допомгою FLV Player‘a, або перекодувати у нормальний відеофайл за допомогою простеньких програм типу Virtual Dub.

Приємного перегляду!

Update від 10.11.07: зара усе простіше - медіаплеєри підтримують flv-формат, та й з’явилася вже купа онлайн-конверторів для завантаження роликів з різних відео-сервісів. Наприклад, converttube.com…

Update від 24.07.08: коротше, цих сервісів для збереження відео з різних відеохостингів уже стільки розвелося, що вже мабуть і нема сенсу відслідковувати, які з них працюють, які ні ))) ….

Написати коментар