310 / 93 / 6
Регистрация: 21.06.2010
Сообщений: 276
1

Поиграем в CSS3?

20.01.2012, 22:36. Показов 4167. Ответов 37
Метки нет (Все метки)

Предлагаю поиграть в CSS3. Будет полезно как новичкам, так и старичкам.
Смысл игры такой: даётся задание сделать какой то сложный элемент средствами вёрстки, кто первый его выполняет - даёт следующее задание, но сам в нём не участвует, потому что знает как это сделано. Остальные дают оценку выполненной работе. Ну как есть желающие попробовать свои силы?
Я начинаю, даю задание. Средствами CSS3 сделать следующее.
Название: css.png
Просмотров: 377

Размер: 3.7 Кб
Изображения использовать нельзя, исключительно кодом.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.01.2012, 22:36
Ответы с готовыми решениями:

Поиграем в слова
Писать можно только существительные(без имён, названий городов и т.п.) с одним условием - слова не...

Варкрафт 3, ДОТА: пишите, поиграем
Кто-то играет? Если да - пишите, поиграем...а то из знакомых мало кто с дотой дружит, а боты...

Поиграем в слова (без "й")
Писать можно только существительные(без имён, названий городов и т.п.) с одним условием - слова не...

CSS3 and IE
Подсажите пожалуйста. Мне нужно, чтобы элемент CSS3 либо просто пропадал, если используется ИЕ,...

37
311 / 303 / 78
Регистрация: 09.05.2009
Сообщений: 723
20.01.2012, 23:21 2
Сделать такую стрелку навряд ли возможно. А если и возможно то через мега изврат. Сам то хоть знаешь как она делается?
0
310 / 93 / 6
Регистрация: 21.06.2010
Сообщений: 276
20.01.2012, 23:47  [ТС] 3
Знаю . Мегаизврата нет. Даю подсказку: нужно использовать "таблицу" из дивов 2х2 с борд... Ну и так много сказал.
0
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
21.01.2012, 00:55 4
это извращение с использованием transform? )

Добавлено через 5 минут
CSS
1
2
3
4
5
6
7
8
9
10
11
.class1{
transform:rotate(30deg);
display:inline;
color:#0f0;
}
 
.class2{
transform:rotate(120deg);
display:inline;
color:#0f0;
}
как то так?
0
217 / 197 / 26
Регистрация: 18.02.2010
Сообщений: 1,831
21.01.2012, 02:47 5
Похоже на трансформ с радиальным градиентом. Если правильно, то у меня сразу же вопрос на тему "поиграем в CSS" - найти верстальщика, который делает в повседневной работе картинку 40x35 без использования "изображений", при этом он не пьёт, не курит ничего кроме сигарет, Малахова не смотрит и в гейклубы не ходит.
1
Vovan-VE
21.01.2012, 09:41
  #6

Не по теме:

CalebElT, А задания обязательно должны быть на вынос мозга, чтобы показать всю мощь CSS3, или любые, встречаемые на практике?

0
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
21.01.2012, 10:19 7
Цитата Сообщение от Mailo Посмотреть сообщение
Похоже на трансформ с радиальным градиентом. Если правильно, то у меня сразу же вопрос на тему "поиграем в CSS" - найти верстальщика, который делает в повседневной работе картинку 40x35 без использования "изображений", при этом он не пьёт, не курит ничего кроме сигарет, Малахова не смотрит и в гейклубы не ходит.
0
68 / 66 / 19
Регистрация: 27.12.2008
Сообщений: 212
21.01.2012, 11:38 8
Цитата Сообщение от Mailo Посмотреть сообщение
Похоже на трансформ с радиальным градиентом. Если правильно, то у меня сразу же вопрос на тему "поиграем в CSS" - найти верстальщика, который делает в повседневной работе картинку 40x35 без использования "изображений", при этом он не пьёт, не курит ничего кроме сигарет, Малахова не смотрит и в гейклубы не ходит.

Не по теме:

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

0
311 / 303 / 78
Регистрация: 09.05.2009
Сообщений: 723
21.01.2012, 15:50 9
CalebElT, Выкладывай код картинки. Уверен на 100% что она не такая как на картинке.
0
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
21.01.2012, 15:52 10
это типа все сдались? ) кто же тогда загадает следующий вопрос?
0
311 / 303 / 78
Регистрация: 09.05.2009
Сообщений: 723
21.01.2012, 16:28 11
Да вопросы нужно задавать нормальные, которые реально можно применять в проектах.
0
68 / 66 / 19
Регистрация: 27.12.2008
Сообщений: 212
21.01.2012, 17:34 12
Цитата Сообщение от Daredevi1 Посмотреть сообщение
CalebElT, Выкладывай код картинки. Уверен на 100% что она не такая как на картинке.
Откуда такая уверенность? логотип оперы видел?
Цитата Сообщение от Daredevi1 Посмотреть сообщение
Да вопросы нужно задавать нормальные, которые реально можно применять в проектах.
Автор не задает вопросов (особенно тебе), он предлагает игру. Кто хочет играет, остальные не мешают. Вот я, например, не мешаю)
0
217 / 197 / 26
Регистрация: 18.02.2010
Сообщений: 1,831
21.01.2012, 17:50 13
Xero201, детский сад у вас, а не игра. Зачем негру лопата, когда у него есть экскаватор.
0
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
21.01.2012, 21:30 14
HTML5
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
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<style>
#main{
    position:relative;
    background:#0f0;
    width:150px;
    height:140px;
    background:-webkit-linear-gradient(top,#090,#0f0);
}
#st{
    position:absolute;
    margin:70px 10px 10px 0px;
    height:20px;
    width:60px;
    background: -webkit-radial-gradient(#0f0, #090);
    -webkit-transform:rotate(45deg);
}
#nd{
    position:absolute;
    margin:62px 10px 10px 33px;
    height:20px;
    width:120px;
    background: -webkit-radial-gradient(#0f0, #090);
    -webkit-transform:rotate(-45deg);
}
</style>
</head>
<body>
    <div id="main">
        <div id="st"></div>
        <div id="nd"></div>
    </div>
</body>
</html>
корявенько, но цель достигнута )) правда не добавлял тени

Добавлено через 1 минуту
и еще, это не кроссбраузерно, делал для хрома, так как им пользуюсь, но собственно ничего не мешает добавить нужные строки
0
311 / 303 / 78
Регистрация: 09.05.2009
Сообщений: 723
21.01.2012, 23:47 15
Цитата Сообщение от conformist Посмотреть сообщение
корявенько, но цель достигнута )) правда не добавлял тени
Ты считаешь это похожим на ту картинку? Галочку конечно ты сделал... Да это и не было проблемой. Проблема сделать точно такую картинку со всеми деталями.
0
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
21.01.2012, 23:56 16
Цитата Сообщение от CalebElT Посмотреть сообщение
Изображения использовать нельзя, исключительно кодом
я думаю все таки, что тут важна мощь css3, реализация кодом, а не рисунками. так что создание 100% копии не требуется, да и бессмысленно. может я этими средствами что то другое хочу нарисовать
0
13207 / 6595 / 1041
Регистрация: 10.01.2008
Сообщений: 15,069
22.01.2012, 07:23 17
conformist, Имхо, что-то вроде такого было бы более интересно, потому что результат более тривиален и, как следствие, более масштабируем на другие ситуации. http://ruseller.com/adds/adds1988/example/

Добавлено через 3 минуты
Еще было бы интересно поиграться не только со свойствами, но и с селекторами (особенно, с новыми псевдо-классами).
0
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
22.01.2012, 11:10 18
Vovan-VE, а так же покрутить их и раскрасить в разные цвета и градиенты )
а вот еще интересное в css3. Наглядное сравнение возможностей CSS3 и CSS2.1 + JavaScript
0
217 / 197 / 26
Регистрация: 18.02.2010
Сообщений: 1,831
22.01.2012, 18:50 19
Да уж ну и сайт этот тутплюс.com. И кто такие делает, реклама на треть сайта, примеры отдельно код отдельно. Решил классику почитать, в которой я не разбираюсь, предварительно глянул те примеры, в которых я разбираюсь, в итоге:

- скруглённый уголки - классический вариант, IE 6 у них фигню какую то кажет, пирог, который судя по всему не является классикой кажет во всех браузерах всё одинаково, туда же тени.

- прозрачность, всего 2 строки
CSS
1
2
opacity: 0.6;
filter: alpha(Opacity=60);
все браузеры кажут одинаково прозрачность, правда прозрачный и шрифт внутри блока. Там же умудрились, вроде бы то же самое написать, а в эксплорерах квадратики разной прозрачности, как так получилось
И до сих пор не пойму зачем нужна строка:
CSS
1
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
- написанно что для IE 8, но вышеописанные свойства с лёгкостью рисуют прозрачность в 8м осле.

-RGBA, классический вариант - пустое место.....закрыл сайт
0
O tempora, o mores!
238 / 172 / 13
Регистрация: 15.01.2012
Сообщений: 681
22.01.2012, 19:07 20
css3 вообще странновато реализуется во всех браузерах, но фишка все равно в том - что можно было сделать при помощи css2 и javascript - можно сделать одним css3

а тот сайт....согласен....неудачный пример
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.01.2012, 19:07
Помогаю со студенческими работами здесь

HTML5 И CSS3
Стоит ли сейчас по максимуму использовать HTML5 и CSS3? Ведь большинство устаревших браузеров не...

Css3 transform
Промучившись +7 часов обращаюсь к вам, уважаемые профи. У меня то что-то уезжает, то еще что-то. ...

CSS3 и Chrome
Всем привет! Хром не понимает данный код стиля, а мозилла отлично его понимает. Это сам хром не...

Best CSS3 Tutorial
Какую литературу или сайт пересмотреть для начинающего верстальщика?) Спасибо


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru