Геометрическая рамка на css / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Геометрическая рамка на css

22 сообщений из 22, страница 1 из 1

Геометрическая рамка на css

#38775178

ldar

Гость

Доброе время суток, дизайнер подкинул работу, необходимо сверстать рамку для фото необычной формы

как можно это осуществить?

...

Рейтинг:

0 / 0

13.10.2014, 14:46

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775185

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

Таблица 3х3, у которой борта и углы заполнены радиальными градиентами.

...

Рейтинг:

0 / 0

13.10.2014, 14:49

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775194

ldar

Гость

AntonariyТаблица 3х3, у которой борта и углы заполнены радиальными градиентами.
с расцветкой понятно, меня интересует как получить такую форму

...

Рейтинг:

0 / 0

13.10.2014, 14:54

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775196

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

Радиальным градиентом же.

...

Рейтинг:

0 / 0

13.10.2014, 14:55

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775203

ldar

Гость

AntonariyРадиальным градиентом же.
чет не понял, если не тяжело, можно примерчик.

...

Рейтинг:

0 / 0

13.10.2014, 14:58

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775208

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

ldarкак можно это осуществить?
Какой размер у той "рамки"?
А то может просто взять всю картинку и использовать...

...

Рейтинг:

0 / 0

13.10.2014, 15:01

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775225

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

ldarAntonariyРадиальным градиентом же.
чет не понял, если не тяжело, можно примерчик.
Не то чтобы не тяжело, возни много. Для затравки:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Градиент</title>
    <style>

        .nw {
            background: radial-gradient(circle at 40px 40px, transparent 20px,  #FA9CC8 21px, #FA9CC8 23px, white 24px, white 26px,  #FFC000 27px, #FFC000 29px, transparent 30px);
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <tr>
            <td width="30" height="30" class="nw"></td>
            <td width="100"></td>
            <td width="30"></td>
        </tr>
        <tr>
            <td height="100"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td height="30"></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

...

Рейтинг:

0 / 0

13.10.2014, 15:16

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775345

skyANA

Участник

Откуда: Зеленоград

Сообщения: 22 795

Рейтинг: 0 / 0

krvsaldarкак можно это осуществить?
Какой размер у той "рамки"?
А то может просто взять всю картинку и использовать... ТС хочет на CSS. Хотя background - это CSS.
Так что не знаю, что автор мучается. Запилил бы по старинке спрайт и всё.

...

Рейтинг:

0 / 0

13.10.2014, 16:12

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775346

skyANA

Участник

Откуда: Зеленоград

Сообщения: 22 795

Рейтинг: 0 / 0

ldar, а как должна выглядеть прямоугольная (не квадратная) рамка? Есть эскиз?

...

Рейтинг:

0 / 0

13.10.2014, 16:13

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775368

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

skyANAТС хочет на CSS.
Так он может по другому и представить себе не может ее создания...

...

Рейтинг:

0 / 0

13.10.2014, 16:28

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775781

ldar

Гость

Таблично и с градиентом получается еще то извращение. Сейчас я использую как background, но думал есть проще вариант на чистом css. К тому же рамка не квадратная, а выпуклая.
Еще один ламерский вопрос, как в центр рамки поместить фото, чтоб с краев не было видно.

...

Рейтинг:

0 / 0

14.10.2014, 07:11

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775782

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

ldarТаблично и с градиентом получается еще то извращение. Сейчас я использую как background, но думал есть проще вариант на чистом css. К тому же рамка не квадратная, а выпуклая.
Еще один ламерский вопрос, как в центр рамки поместить фото, чтоб с краев не было видно.Так она и будет выпуклой.

Если использовать мой способ, то фотку можно сделать бэкграундом всей таблицы, а градиент сделать изнутри прозрачным, а снаружи цветом фона.

...

Рейтинг:

0 / 0

14.10.2014, 07:19

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775940

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

http://jsfiddle.net/tr96u1zj/

...

Рейтинг:

0 / 0

14.10.2014, 11:05

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775958

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

Кстати, вот как это безобразие выглядит в разных браузерах:

...

Рейтинг:

0 / 0

14.10.2014, 11:23

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38775973

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

Девка - да, аппетитная...

...

Рейтинг:

0 / 0

14.10.2014, 11:31

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38776081

ldar

Гость

Спасибо за помощь. Конечно не вебките выглядит ужасно

...

Рейтинг:

0 / 0

14.10.2014, 12:29

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38776133

Малыхин Сергей

Участник

Откуда: г. Курск

Сообщения: 745

Рейтинг: 0 / 0

svg везде выглядит хорошо и букв меньше печатать нужно

...

Рейтинг:

0 / 0

14.10.2014, 12:51

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38776182

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

ну напечатай штоле.

...

Рейтинг:

0 / 0

14.10.2014, 13:27

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38776220

Малыхин Сергей

Участник

Откуда: г. Курск

Сообщения: 745

Рейтинг: 0 / 0

Одно дело советовать комунить другое самому делать

...

Рейтинг:

0 / 0

14.10.2014, 14:01

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38776230

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

Малыхин СергейОдно дело советовать комунить другое самому делать

значит букв больше.
я-то написал всего один стиль из восьми, остальные скопипастил и изменил координаты центра градиента.

...

Рейтинг:

0 / 0

14.10.2014, 14:09

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38776325

Малыхин Сергей

Участник

Откуда: г. Курск

Сообщения: 745

Рейтинг: 0 / 0

http://learn.javascript.ru/play/HbiPg

...

Рейтинг:

0 / 0

14.10.2014, 15:27

| Ответить | Цитировать | Написать

Геометрическая рамка на css

#38776553

Antonariy

Участник

Откуда: ☭

Сообщения: 80 221

Рейтинг: 0 / 0

Малыхин Сергей http://learn.javascript.ru/play/HbiPg на глаз букв не меньше, зато сиськи определенно лучше. :)

...

Рейтинг:

0 / 0

14.10.2014, 18:14

| Ответить | Цитировать | Написать

22 сообщений из 22, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Геометрическая рамка на css

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&msg=38776220&tid=1446629]:	0ms
get settings:	12ms
get forum list:	13ms
check forum access:	2ms
check topic access:	2ms
track hit:	56ms
get topic data:	7ms
get forum data:	2ms
get page messages:	37ms
get tp. blocked users:	1ms
others:	240ms

total:	372ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы