Стильные рамки (блоки)

Недавно заинтересовалась CSS (Cascading Style Sheets) — каскадные таблицы стилей.
Можно ли, не будучи веб-дизайнером, научиться разбираться в этом сложном наборе
параметров? Для чего? Ну, хотя бы для того, чтобы с помощью языка CSS создавать
блоки (рамочки), где будут размещаться текст, картинки или что нашей душе угодно.
Поэкспериментировала с кодами и получила вот такие стильные, лёгкие блоки.

Под каждым стоит его код. Можно менять размер (атрибут width: 650px), цвет фона,
обводок, чтобы получить разные по цветовому исполнению блоки.
Обозначение цвета: #ABEDF7, просто оставляем решётку #, убираем ABEDF7,
и ставим свой цвет.

Здесь будет ваш текст

Ваша подпись

<center><div style="#shed_left; padding: 20px; width: 650px; background: #C3FEAA; border-radius: 12px; box-shadow: 4px 4px 4px rgba(0,0,0,0.6);"><div style="border: 3px solid #66CC00; padding:10px; background: #FBFFAC; border-radius: 12px; boxShadow 11: width: 80%; max-width:; margin: 0em auto; padding: 1em; box-shadow: 0 4px 4px #575555 inset;"><span style="font-family: Georgia; color:#000000; font-size: 19px;"><i> Здесь будет ваш текст<br /> <br /> </i></span><center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></div></div></center>

Смотрим дальше

Цветное окошко для кода

Не мной придумано, но вещь полезная. Без окошек для кодов нам не
обойтись при написании многих постов.

Вот простенькое, с прозрачным фоном:

ВАШ КОД

А это код нашего простого окошка:

<textarea style="text-align: center;" readonly="readonly" cols="15" rows="1" name="S1">ВАШ КОД

При необходимости меняем размер. Атрибут cols="15" отвечает за
ширину окошка. Меняем цифру "15" на нужную нам. Атрибут rows="1" отвечает за высоту. Вместо "1" можем поставить "2", например.

А можно украсить наше окошко цветом, вот так:

ВАШ КОД

Вот код цветного окошка:

<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color:lawngreen; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД

Смотрим дальше

Таблица цветов с названиями по-английски

Клипарт "Девушки ретро"

Красивый клипарт с девушками для ваших работ. Все изображения кликабельны. Фотографии в альбоме "Девушки ретро" Ю. Гурбер на Я. Ф. Смотрим дальше

Клипарт "Девушки (лица)"

Красивый клипарт с девушками для ваших работ. Все изображения кликабельны. Фотографии в альбоме "Девушки (лица)" Ю. Гурбер на Я. Ф. Смотрим дальше

Мои бесшовные фоны

Авторские фоны для вашего творчества (коричневые). Фоны от Юлии Гурбер

Обводка внутри рамки (блока)

Хочу представить вам вот такую симпатичную рамку с пунктирной обводкой внутри.
Не правда ли, похоже на прошивку? Этим можно играть, подбирая тканевые цвета. Например, голубой (чем не джинс?)

Текст
Ваша подпись

<center><div style="padding: 10px 10px; background: #FE9980; width: 610px; font-size: 27px; font-family: Monotype Corsiva; color: #fff; border: 2px dashed #fff; border-radius: 3px; box-shadow: 0 0 0 5px #FE9980, 3px 2px 7px 4px rgba(10,10,0,.5); text-shadow: -1px -1px #aa3030;">Текст<br /> <center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank"><font face="Georgia" color="#ffffff" style="font-size:18px">Ваша подпись</font></a></center></div></center>

Смотрим дальше

Набор рамочек с разрывом (можно вставлять фон)

Рамочка с внешней тенью

***Картинка в разрыве*** ***Здесь будет Ваш текст***

<center><table style="background-image: url('***Фон -1***'); border: 7px double #FFFFFF; padding: 5px; box-shadow: 0px 0px 20px #000000;" width="700"><tr><td style="padding:30px"><fieldset style="border: 7px double #FFFFFF; padding: 5px; background-image:url('***фон-2***'); box-shadow: 0px 0px 20px #000000;"><legend>***Картинка в разрыве***</legend><center><span style=";font-family:Georgia;font-size:18px;color:#ffffff;"><center>***Здесь будет Ваш текст***</center><br /> </span></center></fieldset></td></tr></table></center>

Рамочка без тени

***Картинка в разрыве*** ***Здесь будет Ваш текст***

<center><table style="background-image: url('***Фон -1***');border: 7px double #FFFFFF; padding: 5px; " width="700"><tr><td style="padding:30px"><fieldset style="border: 7px double #FFFFFF; padding: 5px; background-image:url('***фон-2***'); "><legend>***Картинка в разрыве***</legend><center><span style=";font-family:Georgia;font-size:18px;color:#ffffff;"><center>***Здесь будет Ваш текст***</center><br /> </span></center></fieldset></td></tr></table></center>

Рамочка с внутренней тенью

***Картинка в разрыве***

***Здесь будет Ваш текст***

<center><div style="border:7px double #000066;border-radius:5px;padding:10px;background-image:url('https://img-fotki.yandex.ru/get/4/120937872.166/0_b3ab5_e3245b27_S.jpg');width:75%;box-shadow: inset 0px 0px 35px #000000;"><fieldset style="border: 7px double #000066; padding: 5px; background-image:url('***фон-2***'); box-shadow: 0px 0px 20px #000000;"><legend>***Картинка в разрыве***</legend><center><span style=";font-family:Georgia;font-size:18px;color:#000000;"><center>***Здесь будет Ваш текст***</center><br /> </span></center></fieldset></div></center>

для serdjick(объяснение для новичка)

Это прозрачная рамочка: Попробуйте поставить текст сюда.Вместо записи "***Здесь будет Ваш текст***Поставьте свои стихи.Но сначала скопируйте код в рамочке и поставьте его у себя в редакторе)))

<i><div align="center"><table style=" width:740px;-webkit-border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;border-radius: 40px 40px 40px 40px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style="width:740px;-webkit-border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;border-radius: 40px 40px 40px 40px;" background="ФОН 3" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#ЦВЕТ ШРИФТА;font-size:16px"><br /><br /> ***Здесь будет Ваш текст***<br /> <br /></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"></span></td></tr></table></td></tr></table></div></i>


Или перед текстом поставьте это(копируй)
<i><div align="center"></div></i>

У меня всё получилось

Рамочка. Женщина с голубыми глазами

Здесь будет ваш текст...

<center> <table background="https://img-fotki.yandex.ru/get/6729/58982200.6a/0_e1c4e_4725453c_orig.png" border="0" cellpadding="0" cellspacing="0" height="699" width="750"> <tbody> <tr> <td>  </td> </tr> </tbody> </table> <table background="https://img-fotki.yandex.ru/get/4308/58982200.6a/0_e1c4f_44cac7c0_orig.png" border="0" cellpadding="0" cellspacing="0" width="750"> <tbody> <tr> <td> <div align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="center" style="padding:0px 10px;"> <div align="center"> <center> <p> <span style="color:#000000;"><span style="font-family: Georgia; font-size: 20px;">Здесь будет ваш текст...</span></span></p> </center> </div> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> <div> <table a="a" background="https://img-fotki.yandex.ru/get/6402/58982200.6a/0_e1c50_29ced089_orig.png" border="0" cellpadding="0" cellspacing="0" height="92" title="рамочка от PaVelena" width="750"> <tbody> <tr> <td align="center" height="8" style="padding:0px" valign="bottom" width="9"> <a href="//www.liveinternet.ru/users/pavelena/" target="_blank"><img data-cke-saved-src="//img1.liveinternet.ru/images/attach/c/11/116/804/116804481_5306743_114632163_5306743_0_99aec_65174008_XS_gif.jpg" src="//img1.liveinternet.ru/images/attach/c/11/116/804/116804481_5306743_114632163_5306743_0_99aec_65174008_XS_gif.jpg" /></a> <p>  </p> </td> </tr> </tbody> </table> </div> </center>

Здесь будет ваш текст...

<center> <table background="https://img-fotki.yandex.ru/get/6402/58982200.6a/0_e1c51_47658908_orig.png" border="0" cellpadding="0" cellspacing="0" height="173" width="750"> <tbody> <tr> <td>  </td> </tr> </tbody> </table> <table background="https://img-fotki.yandex.ru/get/5303/58982200.6a/0_e1c52_6802b599_orig.png" border="0" cellpadding="0" cellspacing="0" width="750"> <tbody> <tr> <td> <div align="center"> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="center" style="padding:0px 10px;"> <div align="center"> <center> <p> <span style="color:#000000;"><span style="font-family: Georgia; font-size: 20px;">Здесь будет ваш текст...</span></span></p> </center> </div> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> <div> <table a="a" background="https://img-fotki.yandex.ru/get/5818/58982200.6a/0_e1c53_e98581c7_orig.png" border="0" cellpadding="0" cellspacing="0" height="107" title="рамочка от PaVelena" width="750"> <tbody> <tr> <td align="center" height="8" style="padding:0px" valign="bottom" width="9"> <a href="//www.liveinternet.ru/users/pavelena/" target="_blank"><img data-cke-saved-src="//img1.liveinternet.ru/images/attach/c/11/116/804/116804481_5306743_114632163_5306743_0_99aec_65174008_XS_gif.jpg" src="//img1.liveinternet.ru/images/attach/c/11/116/804/116804481_5306743_114632163_5306743_0_99aec_65174008_XS_gif.jpg" /></a> <p>  </p> </td> </tr> </tbody> </table> </div> </center>

Рамочка "Желанный мужчина"

ВАШ ТЕКСТ ...

<center><table border="0" background="https://img-fotki.yandex.ru/get/5637/242007152.3c/0_1106d1_c2747f26_orig" cellpadding="0" cellspacing="0" height="539" width="800"></table><table border="0" background="https://img-fotki.yandex.ru/get/4421/242007152.3c/0_1106d2_b4e5592a_orig" cellpadding="0" cellspacing="0" height="70" width="800"><tr><td><table align="center" border="0" cellspacing="0" cellpadding="0"><tr> <td width="650"><center> <em><strong><span style="color: #ddd4c6"><span style="font-size: 20px;"><span style="font-family: Georgia"> ВАШ ТЕКСТ ...<br /> </span></span></span> </strong></em> </center></td></tr></table> </td></tr></table><table border="0" background="https://img-fotki.yandex.ru/get/6106/242007152.3c/0_1106d3_98b0bad0_orig" cellpadding="0" cellspacing="0" height="191" width="800"><tr><td><center> <a href="//www.liveinternet.ru/users/5041332/profile" target="_blank"><img src="//img1.liveinternet.ru/images/attach/c/0/39/455/39455483_1234251264_9.gif" /></a> </center> </td></tr></table></center>

Красивые пейзажи PNG

оригинал 800 пикс.
«пейзажи png», автор R-Oksan@ на Яндекс.Фотках

Рамочка с девушкой-2

здесь будет Ваш текст

Рамочка с девушкой

здесь будет Ваш текст

УРОК = КАК РАЗРЕЗАТЬ РАМОЧКУ ФОТОШОП И ВСТАВИТЬ В СООБЩЕНИЕ =

ВСЕ МОИ УРОКИ ЗДЕСЬ Меня попросили рассказать, как я делаю свои рамочки в программе фотошоп. Дизайн рамочки каждый придумывает сам, пользуясь инструментами в фотошоп, то ли она прямоугольная, то ли овальная, то ли нестандартной формы. Используя картинки, рисунки в формате PNG (т.е. на прозрачном слое), анимацию и фоны мы фантазируем и творим наши шедевры. Главное нужно помнить, что средняя часть рамочки должна быть без рисунка (желательно однотонной), чтобы лучше был виден текст. Также в уголочке рамочки напишите свой логин, чтобы было видно кто ее автор. Ну вот рамочка окончена и теперь нам нужно ее перенести в простой редактор нашего сообщения. Есть много способов, о них написаны много сообщений, но я расскажу как это делаю я. ПЕРВОЕ - если ваша рамочка не находится на прозрачном слое ( т.е. если границы рамочки имеют стандартную форму), мы ее сохраняем в формате JPEG. ФАЙЛ-СОХРАНИТЬ КАК- ТИП ФАЙЛОВ (выбираем формат JPEG). ВТОРОЕ - если ваша рамочка необычной формы, с выходящими за границу цветами, фигурной рамкой и т. д., мы сохраняем ее в формате PNG. ФАЙЛ-СОХРАНИТЬ КАК-ТИП ФАЙЛОВ (выбираем формат PNG). ТРЕТЬЕ - если в вашей рамочке присутствует анимация, сохраняем ее в формате GIF. ФАЙЛ-СОХРАНИТЬ ДЛЯ WEB И УСТРОЙСТВ- выбираете один из вариантов изображения, щелкаете по нему и затем выставляете значения как на картинке. В строчке , где написано МАТОВЫЙ - выбираете НЕ ПОКАЗЫВАТЬ:

Читать далее...

девушки png

Делаем рамочку в Онлайн фото редактор - Free Online-Image-Editor

Серия сообщений "ВИДЕО уроки":

Серия сообщений "ДЕЛАЕМ РАМОЧКИ":

Открыточки PNG. "С Днём рождения!"

<a data-cke-saved-href="http://www.liveinternet.ru/users/pavelena/" href="http://www.liveinternet.ru/users/pavelena/" target="_blank"><img alt="" data-cke-saved-src="https://img-fotki.yandex.ru/get/18/58982200.6a/0_e1b00_dc909f28_orig.png" src="https://img-fotki.yandex.ru/get/18/58982200.6a/0_e1b00_dc909f28_orig.png" style="border-width: 0px; border-style: solid;" title="Открытки от PaVelena" /></a>

+ 4

делаем необычные коллажи

Шрифты, HTML-коды / примеры с кодами

В своих постах мы иногда используем разные шрифты (в панели спецкодов их 4),
некоторые используют до десятка-полутора шрифтов, но их намного-намного больше.
Дам вам СПИСОК ШРИФТОВ, где их более 100 и дам коды некоторых примеров.

_ШРИФТЫ + КОДЫ_

Monotype Corsiva <font face="Monotype Corsiva" size="+3" color="Red">ВАШ ТЕКСТ</font> Georgia <font face="Georgia" size="+3" color="SlateBlue">ВАШ ТЕКСТ</font> MS Mincho <font face="MS Mincho" size="+2" color="fuchsia">ВАШ ТЕКСТ</font> Comic Sans MS <font face="Comic Sans MS" size="+3" color="SeaGreen">ВАШ ТЕКСТ</font>

Garamond <font face="Garamond" color="#008B45" style="font-size:40px"><i><b>ВАШ ТЕКСТ</b></i></font> Wingding <font face="Wingding" color="#1E90FF" style="font-size:30px"><i><b>ВАШ ТЕКСТ</b></i></font> Times New Roman <font face="Times New Roman" color="#68228B" style="font-size:30px"><i><b>ВАШ ТЕКСТ</b></i></font> Courier New <font face="Courier New" color="#00FF00" style="font-size:40px"><i><b>ВАШ ТЕКСТ</b></i></font>

_ОБЩИЙ ПРИНЦИП_ Задать размер текста можно двумя способами: отличный от обычного (±1, ±2,..) или размер текста в рх Код цвета можно задавать: буквенным написанием или кодом-HTML

<font face="выбранный ШРИФТ" size="размер ±" color="ЦВЕТ буквенный"> ВАШ ТЕКСТ</font>

<font face="выбранный ШРИФТ" color="ЦВЕТ кодHTML" style="font-size:РАЗМЕРpx">ВАШ ТЕКСТ</font>

Выбрать ШРИФТ можете из таблицы ниже. Скопировав его, вставьте в код вместо слов "выбранный ШРИФТ".

_Список шрифтов для использования в HTML-коде_

---

Интересные символы


Есть интересные символы, которые можно набрать на клавиатуре, но чтобы не морочить себе голову, можете их просто склпировать и вставить в пост.
Кстати говоря, вы можете менять их цвет и размер, как и любого текста.
☂ ❅ ☭ ♈ ❺

---

Символы — цифры:
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ — ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓ — ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿

---

Символы — Знаки Зодиака:
(размер поставила +4)
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓

---

Символы — цветов и снежинок:
+4
✽ ✾ ✿ ❀ ❁ ❂ ❃ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋

---

Символы — Нотные знаки
+6
♩ ♪ ♫ ♬ ♭ ♮ ♯

---

Символы — Шахматы
+4
♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟

---

Символы — Карточные масти
+4
♠ ♣ ♥ ♦ -=изменим цвет=- ♠ ♣ ♥ ♦

---

Разные символы:
+3
ツ ๏ ͡ ̯ ๏ ღ ஐ ₪ ఋ இ の Ѡ ☭ ✖ ☂ ☃ ★ ☆
卍 卐 ☪ ☠ ☯ ☮ ✇ ☤

---

И ещё:
+5
✐ ✑ ✒ ✎ ✍ ✄ ✂ ✉ ❥ ❍ ❒ ✡ ✗ ■ ○ ☐ ☑ ☒ ✓ ✔ ☼ ☪ ☽ ☾ ☎ ☏

---

Символы — стрелки:
+3, жирный
↔ ↕ ← ↖ ↑ ↗ → ↘ ↓ ↙ ˿ ≪ ↨ ⇦ ⇧ ⇨ ⇩ ⇐ ⇑ ⇒⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ↺ ↻ ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ￩ ￪ ￫ ￬ ➜ ➝ ➞ ➟ ➡ ➥ ➦ ➨ ➩ ➪ ➯ ➱ ➲ ⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝≤ ≥ ≦ ≧ ≨ ≩ ≪ ≫ ≲ ≳

---