• Авторизация


Рамка с круглыми углами. Без фотошопа! 28-02-2014 20:12 к комментариям - к полной версии - понравилось!


РАМКИ С КРУГЛЫМИ УГЛАМИ


А здесь урок по таким же рамкам, но объемным (с тенями и разными углами)


Наверно многие, кто сейчас смотрит на рамку ниже, думают, что она сделана в программе Фотошоп...Нет. Она сделана с помощью html-кода, как обычные рамки с прямыми углами. Эффект круглых углов виден в браузерах Google Chrome, Mozilla Firefox. В Internet Explorer рамка будет отражаться как обычная с прямыми углами. В других не знаю. Я дам "скелетик" кода такой рамки, чтобы подставляя свои фоны и параметры, вы могли без особого труда собрать свою рамочку и объясню как им пользоваться.

ИТАК.
Вот эти 2 заготовки ниже можно использовать в любых вариантах. Их можно использовать как самостоятельную рамку, а можно вставлять в прямоугольные рамки или в такие же рамки с закругленными углами, или в такие круглые рамки вставлять прямоугольные. Короче все зависит от вашей фантазии.

Заготовка 1
Здесь будет Ваш текст
Егорова Татьяна

Код готовой рамки-заготовки

Код "скелетика" рамки-заготовки


Заготовка 2
Здесь будет Ваш текст
Егорова Татьяна

Код готовой рамки-заготовки

Код "скелетика" рамки-заготовки


Кому понравились готовые рамки, можете взять их коды из окошка "Код готовой рамки".
Те, кто давно делает рамки легко разберутся. Для новичков расскажу подробнее.
Копируем код из окошка " Код "скелетика" рамки". Вставляем в свою новую запись. Мы видим вот такой, примерно, код.

[700x331]

Если добавить этот код в дневник, то кроме слов "Здесь будет Ваш текст" и "ВАША ПОДПИСЬ" вы больше НИ-ЧЕ-ГО не увидите. В код надо вставить свои изображения и параметры, чтобы стало видно рамку.

Смотрите на скрине ниже ЧТО отражают в рамке слова ОБВОДКА, ФОН 1, ФОН 2, РАЗМЕР УГЛОВ.
Вместо ОБВОДКА, ФОН 1, ФОН 2 вставляем URL своих изображений-фонов. Вместо РАЗМЕР УГЛОВ ставим цифру от 20 до 180. Меньше 20 закругление будет плохо видно. В моих рамках стоит 80.

Заменяете мои слова ЦВЕТ ШРИФТА на код нужного цвета, вместо РАЗМЕР ШРИФТА ставите нужную цифру. У меня стоит 20. Вместо АДРЕС ВАШЕГО БЛОГА вставляете ссылку на ваш блог, вместо ВАША ПОДПИСЬ вписываете свой ник или имя-фамилию.

[700x215]

Вы можете изменять, выделенные красным, значения на большие или меньшие для видоизменения рамки.

[700x220]

Добавляете вместо слов "Здесь будет Ваш текст" свой текст, видео, аудио, флеш, картинки - всё что захотите. Сохраняете.

Всё!

Примеры рамок.


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

Здесь будет Ваш текст
Егорова Татьяна

Код готовой рамки

Код "скелетика" рамки


Рамка 2
Здесь будет Ваш текст
Егорова Татьяна

Код готовой рамки

Код "скелетика" рамки


Рамка 3
Здесь будет Ваш текст
Егорова Татьяна

Код готовой рамки

Код "скелетика" рамки


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

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

Здесь будет Ваш текст
Егорова Татьяна

Код готовой рамки

Код "скелетика" рамки


Рамка 5
[310x95]

Вот такая рамочка получилась у меня после добавления картинок. Думаю их код можно усовершенствовать, а варианты рамок разнообразить. Испытала только на Лиру. Для Яру и других сайтов нужен другой код. Может кто-то сделает. Была бы рада посмотреть на ваши рамки, которые вы сделаете по этому уроку.

Удачи!
[310x95]
Егорова Татьяна

Код готовой рамки
вверх^ к полной версии понравилось! в evernote
Russlana 28-02-2014-21:52 удалить
Спасибо большое Танюша! Очень интересная и необычная рамочка!
stella4707 28-02-2014-22:00 удалить
Танечка, у Вас получились рамочки очень оригинальные. У меня тоже сразу "зачесались руки", хочется попробовать. Спасибо за урок.
P.S. У меня браузер Torch, я тоже вижу углы закругленными.
увы, в Опере не видно закруглений((( А на скрине красиво получается!!!
RozArija 28-02-2014-22:07 удалить
спасибо,Танюш,очень красивые рамочки, цитирую.
Танюша спасибо за урок.
svetanjel 28-02-2014-22:30 удалить
Спасибо Танечка,за полезный и очень интересный урок! Забираю с благодарностью на урок себе. В МАЗИЛЕ показывает круглые углы!
Surge_Blavat 28-02-2014-22:50 удалить
интересно! спасибо Татьяна!
LJILJANA 28-02-2014-22:57 удалить
Татьяна, спасибо за урок!!! Беру с благодарностью!!!
[показать]
Спасибо большое,Танюша.Очень хорошая формула.Вот попробовала, на скорую руку,получилась вот такая рамочка.

[499x434]

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



Я зашла с Оперы,углы круглые видны.
Спасибо Танюша!С благодарностью забираю!
Schamada, тут мне подсказали как еще сделать с тенью и разными по крутизне углами. Интерееесноо. Разберусь расскажу
Ответ на комментарий DED_c_B9ITKU # жалко.((
Schamada 28-02-2014-23:27 удалить
Ответ на комментарий Егорова_Таня # Татьяна, я буду ждать)))
ТБОБЫЛЁВА, здОрово!Все что то новенькое!
Ответ на комментарий Surge_Blavat # Тут еще подсказали как с тенью делать и разными по крутизне углами.Интереееснооо
Ответ на комментарий Любаша_Сумчанка # Классная!:dance3:
Ответ на комментарий Егорова_Таня # Это точно!!! Спасибо тебе большое за урок!!!
Talya6 28-02-2014-23:53 удалить
Так интересно. Очень хочется научиться, Спасибо, Танечка.
zhizn 28-02-2014-23:57 удалить
Спасибо,Танбш!Взяла себе - Зоя
Танечка, спасибо. очень интересный урок
DED_c_B9ITKU 01-03-2014-00:08 удалить
Ответ на комментарий DED_c_B9ITKU # Рамочка из генератора будет растягиватся до бесконечности, если задать параметры не в пикселях (px), а в процентах (например: width:30%;height:100%; )


Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....
Nataliy55 01-03-2014-00:13 удалить
Попробовала сделать, получилось. Корявенько правда, но для меня и это праздник, поскольку я мало что понимаю в кодах. Спасибо большое за урок!
[600x287]


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

[600x433]
Nataliy55

DALIDAS_1 01-03-2014-00:49 удалить
Спасибо,Татьянушка! Ты просто умничка...
С Весной тебя милая..
[371x340]
DED_c_B9ITKU 01-03-2014-00:57 удалить
Ответ на комментарий Егорова_Таня # да, высоту можно не задавать....в общем с этой формулой можно играться до бесконечности...
вот простой набросок, буквально за 3 минуты

[показать]
Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст.....Тут будет ваш текст....

Что то новенькое!!!Спасибо,Танечка!!!)))
Спасибо, Танечка! Забираю с благодарностью. Меня зовут, Юля.
ФАНИНА 01-03-2014-01:09 удалить
как очаровательно получается ! теперь можно разнообразить рамочки ! спасибо большое, забираю с благодарностью !
Nataliy55, с текстом будет хорошо. Просто сейчас центр мелким кажется
Schamada 01-03-2014-01:25 удалить

[450x300]

[454x106]
Татьяна! Вот что получилось.Правда я тут своего уже добавила)))
Но это первая моя схема, с круглыми углами, правда не очень, но я учусь))))
Следующая лучше будет... Уряяяяяя!
[357x119]
[показать]
77 (150x98, 36Kb)
Valentina_begi 01-03-2014-02:13 удалить
Танечка, спасибо большое!!!!!!!
Попробую применить эту формулу.
Я вот все бьюсь над формулой для рамочек с майла, никак пока не получается, только некоторые могла переделать сюда.....


Вы сейчас не можете прокомментировать это сообщение.

Дневник Рамка с круглыми углами. Без фотошопа! | Егорова_Таня - Дневник Егорова Таня | Лента друзей Егорова_Таня / Полная версия Добавить в друзья Страницы: «позже раньше»