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

ReSQL.ru

2.0.61

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

Гость

Войти | Профиль | Очистить

Нов. | Гор. | Избр.

Написать

Автор*:

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

Тема*:

Сообщение

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

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

Автор:

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

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

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

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

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

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

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

Действия ...

Доб. в избранное
Игнор. тему
Прикреп. тему
Пометить прочит. / непрочит.
Фильтр:
Сообщения автора темы
Сообщение содержит вложения
Сообщение содержит картинки
Сообщение содержит видеоклипы
Сообщение содержит аудиоклипы
Сообщение содержит картинки или видео 18+

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

13.10.2014, 14:46

#38775178

ldar

Гость

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

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

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

...

Рейтинг:

0 / 0

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

13.10.2014, 14:49

#38775185

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

13.10.2014, 14:54

#38775194

ldar

Гость

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

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

...

Рейтинг:

0 / 0

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

13.10.2014, 14:55

#38775196

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

13.10.2014, 14:58

#38775203

ldar

Гость

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

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

...

Рейтинг:

0 / 0

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

13.10.2014, 15:01

#38775208

krvsa

Участник

Откуда: г Волжский
Сообщения: 13 823
Рейтинг: 1 / 0

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

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

...

Рейтинг:

0 / 0

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

13.10.2014, 15:16

#38775225

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

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, 16:12

#38775345

skyANA

Участник

Откуда: Зеленоград
Сообщения: 22 795
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

13.10.2014, 16:13

#38775346

skyANA

Участник

Откуда: Зеленоград
Сообщения: 22 795
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

13.10.2014, 16:28

#38775368

krvsa

Участник

Откуда: г Волжский
Сообщения: 13 823
Рейтинг: 1 / 0

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 07:11

#38775781

ldar

Гость

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 07:19

#38775782

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 11:05

#38775940

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

http://jsfiddle.net/tr96u1zj/

...

Рейтинг:

0 / 0

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

14.10.2014, 11:23

#38775958

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 11:31

#38775973

krvsa

Участник

Откуда: г Волжский
Сообщения: 13 823
Рейтинг: 1 / 0

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 12:29

#38776081

ldar

Гость

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 12:51

#38776133

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

Участник

Откуда: г. Курск
Сообщения: 745
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 13:27

#38776182

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 14:01

#38776220

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

Участник

Откуда: г. Курск
Сообщения: 745
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 14:09

#38776230

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 15:27

#38776325

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

Участник

Откуда: г. Курск
Сообщения: 745
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

14.10.2014, 18:14

#38776553

Antonariy

Участник

Откуда: ☭
Сообщения: 80 221
Рейтинг: 0 / 0

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

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

...

Рейтинг:

0 / 0

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

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

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

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

start [/forum/topic.php?fid=22&mobile=1&tid=1446629]:	0ms
get settings:	9ms
get forum list:	14ms
check forum access:	3ms
check topic access:	3ms
track hit:	142ms
get topic data:	10ms
get forum data:	7ms
get page messages:	72ms
get tp. blocked users:	2ms
others:	239ms

total:	501ms

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