Боке
Когда в первый раз услышала слово "боке",почему-то решила,что это французское слово.
Оказалось совсем не так,"боке" переводится с японского как "размытость","нечеткость".
Видела на художественных фотографиях такой фон из размытых кружков, вот это и есть это самое"боке".
Встречалось использование эффекта "боке" в веб-дизайне.Вот моя версия применения нечетких кружков
Для установки нужно:
1.Выбрать оформление Expressive Minimalist Brown
2.Нажать внизу страницы ""Настроить выбранное оформление"
3.Слева выбрать " Custom CSS"
4.Вставить в окно код
body { background: url() repeat-x top center #36596c;color: #333;font-family: "trebuchet ms"; }
a{color: #5F8DCE; text-decoration: none;}
#page {background: url(http://pics.livejournal.com/koddy_80/pic/000118b1) repeat-x top center;}
#page-inner {background: url(http://pics.livejournal.com/koddy_80/pic/00012g6b) no-repeat 60% 0%;}
#content { background: url() repeat-x top center #DAE4E9;width: 920px;margin-bottom: 0px;margin-top: 0px;padding: 30px 20px 10px 10px;
-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-webkit-border-top-right-radius: 10px;-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;
border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;
-webkit-box-shadow: 1px 5px 20px #000;-moz-box-shadow: 1px 5px 20px #000;box-shadow: 1px 5px 20px #000;z-index: 10;}
#alpha { width: 700px;margin: 0 5px;padding: 0 0 0px 0;}
#alpha-inner { width: 650px;margin: 0px;padding: 0 0px 0 0;}
#beta{width: 180px;padding: 0;}
#beta-inner {width: 170px;}
#header { background: transparent url() repeat-x top center; padding: 0;border-bottom: 0px solid #f1dec1; height: 170px;}
#header-inner {background: transparent url() no-repeat top center; height: 170px;width: 1024px;}
#header-text {background:url() no-repeat top center; float: right;padding: 45px 0 0 0;margin: 47px 0 0 10px;width: 510px;text-align: center;height: 120px;}
#header-name a , #header-description, .widget-header, .widget-header a, .page-header2, .page-header2 a {color: #333;}
#header-name a {text-decoration: none;font-weight: bold;font-size: 34px;height: 50px;}
#header-description {font-size: 14px;}
#header .nav, #header-name {margin-bottom: 0px;}
#header-text {background: url() no-repeat 0% 50%;padding: 45px 0 0 30px;height: 55px;}
.nav {float: right;width: 480px;margin: 20px 0 0 0;padding: 0 0 0 5px;font-size: 14px;}
.nav .item {background: #365A6C;padding: 4px 6px 0 6px;margin: 5px 2px 0 2px;height: 20px;border: 0px solid #fff;-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;}
.nav a { color: #fff; text-decoration: none;}
.nav a:hover {text-decoration: none;}
.nav .current {background-color: #DAE4E9;}
#header .nav .current a { font-weight: 400;color: #365A6C; }
.widget-header,.widget-header a {text-decoration: none;font-weight: normal;font-size: 16px;text-transform: uppercase;}
.widget-header { border-bottom: 0px solid #f1dec1; text-align: center; margin-left: 15px;margin-right: 15px;padding: 0;font-size: 16px; font-weight: 700;font-family: trebuchet ms; padding-bottom: .3em;margin: 0 15px 8px 15px; }
.post-asset .asset-body {line-height: 1.4;border-bottom: 1px dashed #fff; padding-bottom: 20px;}
.asset-meta-list a, .asset-meta-list .item {color: #5F8DCE;}
.asset-meta-list, .asset-meta-list a { font-size: 14px; font-weight: 400;}
.asset-meta-list li.item{border-left: 0px solid blue;}
.designed-widget {display: none;}
.asset-meta-list li.item [href*="memadd"]{display:none;}
.asset-meta-list li.item [href*="subscriptions"]{ display:none;}
div.stream-header p.prevnext {display:none;}
#header-name {display: none;}
#footer {background: url() repeat-x top center #36596c;height: 50px;}
.about-me-widget .widget-header a:hover, .widget-header .edit a:hover { text-decoration: underline;color: #DAE4E9;}
.about-me-widget .widget-header a, .widget-header .edit a { text-decoration: underline;color: #DAE4E9;}
Вроде все хорошо, но все таки доработаю еще.
Оказалось совсем не так,"боке" переводится с японского как "размытость","нечеткость".
Видела на художественных фотографиях такой фон из размытых кружков, вот это и есть это самое"боке".
Встречалось использование эффекта "боке" в веб-дизайне.Вот моя версия применения нечетких кружков
Для установки нужно:
1.Выбрать оформление Expressive Minimalist Brown
2.Нажать внизу страницы ""Настроить выбранное оформление"
3.Слева выбрать " Custom CSS"
4.Вставить в окно код
body { background: url() repeat-x top center #36596c;color: #333;font-family: "trebuchet ms"; }
a{color: #5F8DCE; text-decoration: none;}
#page {background: url(http://pics.livejournal.com/koddy_80/pic/000118b1) repeat-x top center;}
#page-inner {background: url(http://pics.livejournal.com/koddy_80/pic/00012g6b) no-repeat 60% 0%;}
#content { background: url() repeat-x top center #DAE4E9;width: 920px;margin-bottom: 0px;margin-top: 0px;padding: 30px 20px 10px 10px;
-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-webkit-border-top-right-radius: 10px;-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;
border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;
-webkit-box-shadow: 1px 5px 20px #000;-moz-box-shadow: 1px 5px 20px #000;box-shadow: 1px 5px 20px #000;z-index: 10;}
#alpha { width: 700px;margin: 0 5px;padding: 0 0 0px 0;}
#alpha-inner { width: 650px;margin: 0px;padding: 0 0px 0 0;}
#beta{width: 180px;padding: 0;}
#beta-inner {width: 170px;}
#header { background: transparent url() repeat-x top center; padding: 0;border-bottom: 0px solid #f1dec1; height: 170px;}
#header-inner {background: transparent url() no-repeat top center; height: 170px;width: 1024px;}
#header-text {background:url() no-repeat top center; float: right;padding: 45px 0 0 0;margin: 47px 0 0 10px;width: 510px;text-align: center;height: 120px;}
#header-name a , #header-description, .widget-header, .widget-header a, .page-header2, .page-header2 a {color: #333;}
#header-name a {text-decoration: none;font-weight: bold;font-size: 34px;height: 50px;}
#header-description {font-size: 14px;}
#header .nav, #header-name {margin-bottom: 0px;}
#header-text {background: url() no-repeat 0% 50%;padding: 45px 0 0 30px;height: 55px;}
.nav {float: right;width: 480px;margin: 20px 0 0 0;padding: 0 0 0 5px;font-size: 14px;}
.nav .item {background: #365A6C;padding: 4px 6px 0 6px;margin: 5px 2px 0 2px;height: 20px;border: 0px solid #fff;-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;}
.nav a { color: #fff; text-decoration: none;}
.nav a:hover {text-decoration: none;}
.nav .current {background-color: #DAE4E9;}
#header .nav .current a { font-weight: 400;color: #365A6C; }
.widget-header,.widget-header a {text-decoration: none;font-weight: normal;font-size: 16px;text-transform: uppercase;}
.widget-header { border-bottom: 0px solid #f1dec1; text-align: center; margin-left: 15px;margin-right: 15px;padding: 0;font-size: 16px; font-weight: 700;font-family: trebuchet ms; padding-bottom: .3em;margin: 0 15px 8px 15px; }
.post-asset .asset-body {line-height: 1.4;border-bottom: 1px dashed #fff; padding-bottom: 20px;}
.asset-meta-list a, .asset-meta-list .item {color: #5F8DCE;}
.asset-meta-list, .asset-meta-list a { font-size: 14px; font-weight: 400;}
.asset-meta-list li.item{border-left: 0px solid blue;}
.designed-widget {display: none;}
.asset-meta-list li.item [href*="memadd"]{display:none;}
.asset-meta-list li.item [href*="subscriptions"]{ display:none;}
div.stream-header p.prevnext {display:none;}
#header-name {display: none;}
#footer {background: url() repeat-x top center #36596c;height: 50px;}
.about-me-widget .widget-header a:hover, .widget-header .edit a:hover { text-decoration: underline;color: #DAE4E9;}
.about-me-widget .widget-header a, .widget-header .edit a { text-decoration: underline;color: #DAE4E9;}
Вроде все хорошо, но все таки доработаю еще.