{"id":155875,"date":"2012-10-24T01:56:03","date_gmt":"2012-10-23T21:56:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=155875"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=155875","title":{"rendered":"\u0411\u0430\u0437\u043e\u0432\u044b\u0435 CSS-\u0441\u0442\u0438\u043b\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/span>"},"content":{"rendered":"
\t\u0412 \u044d\u0442\u043e\u043c \u0442\u043e\u043f\u0438\u043a\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: \u043a\u043d\u043e\u043f\u043e\u043a, \u0441\u0441\u044b\u043b\u043e\u043a, \u0444\u043e\u0440\u043c, \u0442\u0435\u043d\u0435\u0439, \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0414\u0430 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043f\u0440\u043e\u0449\u0435 \u043d\u0430 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445.<\/p>\n

<\/p>\n

\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/a> \/ \u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a><\/a><\/p>\n

\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/h4>\n

\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0431\u043b\u043e\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n

<div class="block-level"><\/div> <\/code><\/pre>\n
  <\/p>\n
.block-level {     width: 120px;     height: 120px;     margin: 20px;     position: relative;     float: left; } <\/code><\/pre>\n
\u0422\u0435\u043d\u0438<\/h4>\n
  \u0411\u043b\u043e\u043a \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043d\u044c \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.drop-shadow {     background: #9479fa; }   .drop-shadow.top {     box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4) }   .drop-shadow.right {     box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4) }   .drop-shadow.bottom {     box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4) }   .drop-shadow.left {     box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4) } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0430 \u0442\u0435\u043d\u044c\u044e:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
div[class*="emphasize-"] {     background: #69D2E7; }   .emphasize-dark {     box-shadow: 0 0 5px 2px rgba(0,0,0,.35) }   .emphasize-light {     box-shadow: 0 0 0 10px rgba(255,255,255,.25) }   .emphasize-inset {     box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5) }   .emphasize-border {     box-shadow: inset 0 0 0 7px rgba(255,255,255,.5) } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0412\u044b\u043f\u0443\u043a\u043b\u044b\u0435 \u0431\u043b\u043e\u043a\u0438:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
div[class*="embossed"] {     background: #8ec12d;     color: #333;     text-shadow: 0 1px 1px rgba(255,255,255,0.9); }   .embossed-light {     border: 1px solid rgba(0,0,0,0.05);     box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }   .embossed-heavy {     border: 1px solid rgba(0,0,0,0.05);     box-shadow:          inset 0 2px 3px rgba(255,255,255,0.3),          inset 0 -2px 3px rgba(0,0,0,0.3),         0 1px 1px rgba(255,255,255,0.9); } <\/code><\/pre>\n<\/div>\n<\/div>\n
\u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/h4>\n
  \u0420\u0430\u0437\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
div[class*="gradient"]{     background-color: #DEB8A0;     box-shadow: 0 0 0 1px #a27b62; }   .gradient-light-linear {     background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); }   .gradient-dark-linear {     background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0)); } <\/code><\/pre>\n<\/div>\n<\/div>\n
\u0417\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u043d\u044b\u0435 \u0443\u0433\u043b\u044b<\/h4>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
div[class*="rounded"] {     background: #fca1cc; }   .light-rounded {     border-radius: 3px; }   .heavy-rounded {     border-radius: 8px; }   .full-rounded {     border-radius: 50%; }   .barrel-rounded {     border-radius: 20px\/60px; } <\/code><\/pre>\n<\/div>\n<\/div>\n
\u0421\u0441\u044b\u043b\u043a\u0438<\/h4>\n
  \u0411\u0430\u0437\u043e\u0432\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f:<\/p>\n
<!-- Inline --> \u041f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u0438 <a href="#">\u0441\u0441\u044b\u043b\u043a\u0430<\/a>.   <!-- Block --> <a href="#">\u0421\u0441\u044b\u043b\u043a\u0430<\/a> <\/code><\/pre>\n
  \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.inline-link-1 {     display: inline-block;     margin: 0 0.2em;     padding: 3px;     background: #97CAF2;     border-radius: 2px;     transition: all 0.3s ease-out;      \/* Font styles *\/     text-decoration: none;     font-weight: bold;     color: white; }   .inline-link-1:hover {     background: #53A7EA }   .inline-link-1:active {     background: #C4E1F8 }   .inline-link-1:visited {     background: #F2BF97 } <\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.inline-link-2 {     display: inline-block;     border-bottom: 2px dashed rgba(0,0,0,0.9);     \/* Font styles *\/     text-decoration: none;     color: #777; }   .inline-link-2:hover {     border-bottom-style: dotted; }   .inline-link-2:active {     border-bottom-style: solid; }   .inline-link-2:visited {     border-bottom: 2px solid #97CAF2; } <\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.inline-link-3 {     display: inline-block;     position: relative;     padding-left: 6px;     \/* Font styles *\/     text-decoration: none;     color: #6AB3EC;     text-shadow: 0 1px 1px rgba(255,255,255,0.9); }   .inline-link-3:hover {     color: #3C9CE7; }   .inline-link-3:before {     content: "\\25BA";     font-size: 80%;     display: inline-block;     padding-right: 3px;     pointer-events: none; }   .inline-link-3:hover:before {     color: #F2BF97; } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0421\u0441\u044b\u043b\u043a\u0430 \u0432 Metro-\u0441\u0442\u0438\u043b\u0435:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.metro {     display: inline-block;     padding: 10px;     margin: 10px;     background: #08C;     \/* Font styles *\/     color: white;     font-weight: bold;     text-decoration: none; }   .metro:hover {     background: #0AF } <\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
CSS \u0441 3D-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c<\/b><\/p>\n
\n
.metro.three-d {     position: relative;     box-shadow:          1px 1px #53A7EA,          2px 2px #53A7EA,          3px 3px #53A7EA;     transition: all 0.1s ease-in; }   .metro.three-d:active {     box-shadow: none;     top: 3px;     left: 3px; } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0421\u0441\u044b\u043b\u043a\u0430 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.bordered-link {     display: inline-block;     padding: 8px;     border: 3px solid #FCB326;     border-radius: 6px;     box-shadow:          0 2px 1px rgba(0, 0, 0, 0.2),          inset 0 2px 1px rgba(0, 0, 0, 0.2);     \/* Font styles *\/     text-decoration: none;     font-size: 14px;     text-transform: uppercase;     color: #222; }   .bordered-link:hover {     border-color: #FDD68B }   .bordered-link:active {     border-color: #FEE8BD } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u041a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0438:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.modern {     display: inline-block;     margin: 10px;     padding: 8px 15px;     background: #B8ED01;     border: 1px solid rgba(0,0,0,0.15);     border-radius: 4px;     transition: all 0.3s ease-out;     box-shadow:          inset 0 1px 0 rgba(255,255,255,0.5),          0 2px 2px rgba(0,0,0,0.3),          0 0 4px 1px rgba(0,0,0,0.2);      \/* Font styles *\/     text-decoration: none;     text-shadow: 0 1px rgba(255,255,255,0.7); }   .modern:hover {     background: #C7FE0A } <\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
CSS \u0441 \u0442\u0435\u043d\u044f\u043c\u0438<\/b><\/p>\n
\n
.embossed-link {     box-shadow:          inset 0 3px 2px rgba(255,255,255,.22),          inset 0 -3px 2px rgba(0,0,0,.17),          inset 0 20px 10px rgba(255,255,255,.12),          0 0 4px 1px rgba(0,0,0,.1),          0 3px 2px rgba(0,0,0,.2); }   .modern.embossed-link {     box-shadow:          inset 0 1px 0 rgba(255,255,255,0.5),          0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2),          inset 0 3px 2px rgba(255,255,255,.22),          inset 0 -3px 2px rgba(0,0,0,.15),          inset 0 20px 10px rgba(255,255,255,.12),          0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2); }   .modern.embossed-link:active {     box-shadow:          inset 0 -2px 1px rgba(255,255,255,0.2),          inset 0 3px 2px rgba(0,0,0,0.12); } <\/code><\/pre>\n<\/div>\n<\/div>\n
  <\/p>\n
CSS \u0441 \u0442\u0440\u0435\u0442\u044c\u0438\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c<\/b><\/p>\n
\n
.socle {     position: relative;     z-index: 2; }   .socle:after {     content: "";     z-index: -1;     position: absolute;     border-radius: 6px;     box-shadow:          inset 0 1px 0 rgba(0,0,0,0.1),         inset 0 -1px 0 rgba(255,255,255,0.7);     top: -6px;     bottom: -6px;     right: -6px;     left: -6px;     background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0)); } <\/code><\/pre>\n<\/div>\n<\/div>\n
Input<\/h4>\n
  \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f:<\/p>\n
<input type="text" placeholder="Input name"> <\/code><\/pre>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 border-radius \u043f\u043e \u043a\u043b\u0438\u043a\u0443:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.simple-input {     display: block;     padding: 5px;     border: 4px solid #F1B720;     border-radius: 5px;     color: #333;     transition: all 0.3s ease-out; }   .simple-input:hover {     border-radius: 8px }   .simple-input:focus {     outline: none;     border-radius: 8px;     border-color: #EBD292; } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u041f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 iOS \u0438\u043d\u043f\u0443\u0442\u044b:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.mac {     display: block;     border: none;     border-radius: 20px;     padding: 5px 8px;     color: #333;     box-shadow:          inset 0 2px 0 rgba(0,0,0,.2),          0 0 4px rgba(0,0,0,0.1); }   .mac:focus {     outline: none;     box-shadow:          inset 0 2px 0 rgba(0,0,0,.2),          0 0 4px rgba(0,0,0,0.1),          0 0 5px 1px #51CBEE; } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0421 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.depth {     display: block;     border: 1px solid rgba(255,255,255,0.6);     background: linear-gradient(#eee, #fff);     transition: all 0.3s ease-out;     box-shadow:          inset 0 1px 4px rgba(0,0,0,0.4);     padding: 5px;     color: #555; }   .depth:focus {     outline: none;     background-position: 0 -1.7em; } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u0412\u043c\u0435\u0441\u0442\u043e \u0444\u043e\u0440\u043c\u044b \u0432\u0432\u043e\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043b\u0438\u043d\u0438\u044f:<\/p>\n
  <\/p>\n
CSS<\/b><\/p>\n
\n
.line {     display: block;     border: none;     color: #333;     background: transparent;     border-bottom: 1px dotted black;     padding: 5px 2px 0 2px; }   .line:focus {     outline: none;     border-color: #51CBEE; } <\/code><\/pre>\n<\/div>\n<\/div>\n
  \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0437\u044f\u0442\u044b \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 Basic Ready-to-Use CSS Styles<\/a>.    \t   \t<\/p>\n
<\/div>\n<\/p><\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/155875\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
   \t\u0412 \u044d\u0442\u043e\u043c \u0442\u043e\u043f\u0438\u043a\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: \u043a\u043d\u043e\u043f\u043e\u043a, \u0441\u0441\u044b\u043b\u043e\u043a, \u0444\u043e\u0440\u043c, \u0442\u0435\u043d\u0435\u0439, \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0414\u0430 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043f\u0440\u043e\u0449\u0435 \u043d\u0430 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445.<\/p>\n
  <\/p>\n
  \u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/a> \/ \u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-155875","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/155875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=155875"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/155875\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=155875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=155875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=155875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}