Верстка шаблона из PSD, нужна помощь

zlato · 5 февраля, 2015

Всем добро дня! Подскажите пожалуйста как можно сверстать эту страницу, скрин прекрепил, а именно как сделать такую плитку из отографий где рамка косая, а фото внутри как обычно, очень нужна помощь!!))

Сотовый 03 · 5 февраля, 2015

Создать отдельный слой - белый, например, в нем сделать ромбики (создать 1 ромб-выделение и копировать это выделение на несколько) и вырезать эти области из слоя

Подстроить под этот слой на задний план уже прямые "картинки"

ArtyomK · 5 февраля, 2015

Похоже, из этого можно сделать то, что тебе надо:

http://jsfiddle.net/kizu/bhGn4/

PS: CSS не знаю, знаю только подход к гуглу.

zlato · 5 февраля, 2015

спасибо сейчас попробую, отпишусь о том как все прошло)

bonfunk · 5 февраля, 2015

На мой взгляд, если без хаков, то с помощью SVG (не картинки, а вкрапления в html; это ведь будет шаблон, так понимаю). Сами формы можно сделать произвольными (в т.ч. нужные ромбы), а обрезку фона реализовать при помощи маски. Ещё плюс: тень под картинками будет повторять именно наши формы-ромбы, а не квадратные блоки (как предлагает CSS).

http://www.codicode.com/art/background_text_effect_css_picture_svg_mask.aspx- здесь демонстрируется эта техника, правда фон задаётся для текста, но это не мешает использовать маски для произвольных форм.

_________________

Похоже, из этого можно сделать то, что тебе надо:
http://jsfiddle.net/kizu/bhGn4/

Хотя можно и так, если получится комбинировать нужные повороты.

Изменено 6 февраля, 2015 пользователем bonfunk

robin2368 · 25 ноября, 2016

@zlato Откуда у тебя данный макет и еще в PSD?

Александр Покацкий · 2 декабря, 2016

На здоровье http://htmlbook.ru/css/transform

Марк12 · 20 декабря, 2016

фаст

html :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>1234</title>
</head>
<body>
<div class="block">
<img src="путь к своей картинке" alt="jpgd">
</div>
</body>
</html>

css:

.block{
width: 200px;
height: 100px;
transform: skewX(-15deg);
margin: 10px;
overflow: hidden;
border: 1px solid #ccc;
}
.block img{
transform: skewX(15deg);
}

Изменено 20 декабря, 2016 пользователем Марк12

Войти

Верстка шаблона из PSD, нужна помощь

Рекомендуемые сообщения

zlato

Ссылка на комментарий

Сотовый 03

Ссылка на комментарий

ArtyomK

Ссылка на комментарий

zlato

Ссылка на комментарий

bonfunk

Ссылка на комментарий

robin2368

Ссылка на комментарий

Александр Покацкий

Ссылка на комментарий

Марк12

Ссылка на комментарий

Пожалуйста, войдите, чтобы комментировать

Последние посетители 0 пользователей онлайн

Обзор

Активность