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

Суббота, 25 Июля 2015 г. 10:13 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

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

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

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

Ваша подпись

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

Рубрики:

=УРОКИ=/=уроки по оформлению поста=

Метки: уроки по рамочкам

Понравилось: 4 пользователям

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

Суббота, 25 Июля 2015 г. 10:12 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

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

Вот простенькое, с прозрачным фоном: ВАШ КОД

А это код нашего простого окошка: <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; ">ВАШ КОД

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

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

Рубрики:

=ПОЛЕЗНОЕ ДЛЯ ДНЕВНИКА=/=формулы,коды=

Понравилось: 6 пользователям

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

Суббота, 25 Июля 2015 г. 10:11 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

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

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

Рубрики:

=КЛИПАРТ=/=клипарт девушки=

Метки: клипарт девушки в пнг

Понравилось: 5 пользователям

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

Суббота, 25 Июля 2015 г. 10:09 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

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

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

Рубрики:

=КЛИПАРТ=/=клипарт девушки=

Метки: клипарт девушки в пнг

Понравилось: 3 пользователям

Бесшовные фоны...

Суббота, 25 Июля 2015 г. 09:58 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

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

Фоны от Юлии Гурбер

Рубрики:

=ФОНЫ=/=фоны бесшовные=

Метки: фоны бесшовные

Понравилось: 3 пользователям

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

Суббота, 25 Июля 2015 г. 09:55 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

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

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

<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>

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

Рубрики:

=УРОКИ=/=уроки по оформлению поста=

Метки: уроки по рамочкам

Понравилось: 5 пользователям

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

Суббота, 25 Июля 2015 г. 09:54 + в цитатник
Это цитата сообщения Lyusya-Spring [Прочитать целиком + В свой цитатник или сообщество!]

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

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

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

<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>

Рубрики:

=УРОКИ=/=уроки по оформлению поста=

Метки: уроки по рамочкам

Понравилось: 8 пользователям

Формула прозрачной рамочки от Оленьки Schamada

Суббота, 25 Июля 2015 г. 09:52 + в цитатник
Это цитата сообщения Schamada [Прочитать целиком + В свой цитатник или сообщество!]

для 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>

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

Мне приснился странный сон
Будто я... Наполеон
И встают в полный рост корпуса
Барабаны дробно бьют
Трубы весело поют
Ведь бывают хоть во снах чудеса

Непогода нипочем
Мы дожди переживем
Наши лошади резвы и быстры
Бурю, зной и снегопад
Штурмануть я только рад
Наши сабли как зубы остры

Пики золотом горят
Над шеренгою солдат
И штандарты рвутся в небеса
Пушек слышен перепал...
Черт возьми, я разве спал?..
Но вот снова слышны голоса...

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

Перед нами III Дарий
Полководец он бездарный
И хоть персов и союзников их тьма
Сам себя он запер в Иссе
Что ж, готовься и молися
Пусть поможет тебе сатана

Уж Пинар от крови красен..
Букефал, как он прекрасен...
Самый преданный друг и верный
Ты меня как ветер носишь
Из беды любой выносишь
И умрем мы в один день, наверное...

Бред... опять мне снится сон
Жаль, не до конца лишь он..
Ну а может это лучше даже
Не увидеть судеб жен...
...Снова я Наполеон....
На коне.. и с саблей абордажной

Рубрики:

=УРОКИ=/=уроки по оформлению поста=

Метки: уроки по рамочкам

Понравилось: 10 пользователям

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

Четверг, 23 Июля 2015 г. 19:22 + в цитатник
Это цитата сообщения PaVelena [Прочитать целиком + В свой цитатник или сообщество!]

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

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

<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>

Серия сообщений "=рамочки от PaVelena=":
Часть 1 - Рамочка. Новогодняя...)))
Часть 2 - Рамочка. Новогодняя...)))
...
Часть 22 - Рамочки для текста. 5 цветов...)))
Часть 23 - Рамочка. Весна в стиле ретро...)))
Часть 24 - Рамочка. Женщина с голубыми глазами...
Часть 25 - Рамочка. Мысли
Часть 26 - "Новогоднее"
Часть 27 - "Праздник в воздухе уже витает, Запах мандарин, конфет, чудес…"

Метки: рамочки друзей

Понравилось: 6 пользователям

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

Четверг, 23 Июля 2015 г. 13:38 + в цитатник
Это цитата сообщения R-Oksana [Прочитать целиком + В свой цитатник или сообщество!]

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

ВАШ ТЕКСТ ...

<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>

Рубрики:

=РАМОЧКИ ДРУЗЕЙ=

Метки: рамочки друзей

Понравилось: 6 пользователям

LiveInternetLiveInternet

-Рубрики

-Музыка

Цитатник Infinity_I

Перейти к полной формеБыстрая запись

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

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

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

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

Бесшовные фоны...

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

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

Формула прозрачной рамочки от Оленьки Schamada

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

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