JSFiddle - React, Tailwind, and code Playground
by paffffff
HTML
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="ru"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="ru"> <!--<![endif]-->
<head>
<title>Элементарщина</title>
<meta charset="windows-1251">
<link href='http://fonts.googleapis.com/css?family=Neucha&subset=latin,cyrillic' rel='stylesheet'>
</head>
<body>
<h2>Главное не забудьте про IE<9, когда будете бездумно совать стили в шаблон</h2>
<p class="krivie-ruki">Специальное лечение кривых рук посетителей prowebber.ru от <a href="http://pafnuty.name" terget="_blank">ПафНутиЙ</a> </p>
<p class="krivie-ruki">Обычные картинки будут такими</p>
<p class="news">
<img src="http://pafnuty.name/uploads/posts/2012-05/1337800053_2012-05-23_225419.jpg" alt="картинка" />
</p>
<p class="krivie-ruki">Такими будут смайлы (т.е. без изменений)</p>
<p class="news">
<img src="http://web-mastery.info/up/design/img/smiles/big-smile/smile-3.png" alt="smile" />
</p>
<p class="krivie-ruki">А такими плюсики спойлеров (т.е. без изменений)</p>
<p class="news title_spoiler">
<img src="http://cdn2.iconfinder.com/data/icons/basicset/plus_64.png" alt="картинка" />
</p>
</body>
</html>
CSS
/*Оформление страницы*/
body {
width: 700px;
margin: 50px auto;
text-align: center;
font-family: 'Neucha', cursive;
}
body h2 {
font-size: 36px;
color: #bad;
text-shadow: 1px 1px 0 #fff, 0 0 7px #ccc;
}
.krivie-ruki {
font-size: 20px;
color: #323232;
}
.krivie-ruki a {
display: inline-block;
text-decoration: none;
padding: 0 5px;
background: #bad;
color: #fff;
}
.krivie-ruki a:hover {
background: #323232;
}
/*Конец оформления страницы*/
/*
А это нужный нам код
*/
.news img {
padding: 6px;
-webkit-box-shadow: 0px 2px 5px 0px rgba(000, 000, 000, 0.3);
box-shadow: 0px 2px 5px 0px rgba(000, 000, 000, 0.3);
border: solid 1px rgba(0, 0, 0, 0.2);
/*градиентный фон*/
background: rgb(255,255,255);
background:...