Рамки с эффектным фоновым цветом и установкой размеров



Ещё рамки с настройкой фона и установкой требуемых размеров


Здравствуйте дорогие читатели и гости. В этом посте предлагаю Вам еще рамочки для дизайна Ваших блогов. В кодах этих рамочек можно не только установить красивый фон, но и регулировать высоту и ширину рамки. Так же можно вставить URL адрес картинки, фото или любого другого изображения. Только размеры картинок надо подогнать под размеры рамки. Как изменить размер изображений почитайте в моем посте тут. В остальном, в коде я думаю разберетесь. Меняйте фон, размеры и цвет окантовки рамки. А теперь посмотрите, что у меня получилось:


<div style="background-image: url(http://i034.radikal.ru/0909/11/0c76b1c0f2d2.gif); border: 7px ridge #029D74; height: 100px; padding: 10px; width: 500px;">
Ваш текст
</div>




<div style="background-image: url(http://s11.radikal.ru/i184/0909/0c/4390075dd985.png); border: 4px ridge #ff9900; height: 150px; padding: 10px; width: 350px;">
Ваш текст
</div>



<div style="background-image: url(http://s44.radikal.ru/i106/0909/da/9dbc4720cd5a.jpg); border: 7px groove #CDCDCD; height: 150px; padding: 10px; width: 350px;">
Ваш текст
</div>



<div style="background-image: url(http://i066.radikal.ru/0909/37/52db5e51ade8.png); border: 5px dotted #CDC9A5; height: 120px; padding: 10px; width: 450px;">
Ваш текст</div>



<div style="background-image: url(http://i027.radikal.ru/0909/b3/c520cf45df0c.png); border: 5px inset #D1D1D1; height: 120px; padding: 10px; width: 450px;">
Ваш текст
</div>



<div style="background-image: url(http://s60.radikal.ru/i169/0909/c9/eff685c8b9ad.jpg); border: 3px double #00CDCD; height: 120px; padding: 10px; width: 450px;">
Ваш текст

</div>


Здесь можно написать текст






http://i023.radikal.ru/1404/c5/7618e11c0014.jpg


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










http://s003.radikal.ru/i202/1404/66/87518e0b0dc1.jpg 





<div style="background-image: url(http://s56.radikal.ru/i153/0909/fd/0b490d0d51de.gif); border: 7px ridge #0065db; height: 100px; padding: 10px; width: 500px;">
Ваш текст
</div>


Включайте фантазию и вперед! Желаю Вам творческих успехов. Комментируйте, не забывайте о своих друзьях в социальных сетях. До свидания, всего наилучшего.


Автор статьи ✎ Olga Protasova Выпуск ✹ 4/05/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *