Selected Category:  ╔ 艾瑪のCSS分享 (71)

View Mode: Post List Post Summary

今天是除夕,我沒辦法發紅包給大家,就改寫了三年前寫的CSS,加上最新功能的部分,也把醜醜的回應底線移除,想要下載的朋友請自行下載或複製。 改寫的CSS我會另PO新文,這裡先寫最新功能的CSS囉~

my

回覆區的CSS語法,無名在發表新功能後,還改了回應區的架構,
我用 1~5 號標出區塊,看大家要改哪裡自己想辦法啦!

Posted by amarylliss at 痞客邦 PIXNET Comments(8) Trackback(0) Hits(11593)

提醒:

1) 請開啟 Firefox 程式以利取用CSS程式碼。
2) 此樣式可於PIXNET中,張貼於WRETCH適用樣式中。

請至 [艾瑪CSS] 情人節一號 此篇文章中預覽樣式效果

說明:如果覺得透明度會延遲你的網頁速度
感覺變得頓頓的
請將 content 中的 filter 那一行拿掉即可
 

請從下行/***起開始全部複製。

Posted by amarylliss at 痞客邦 PIXNET Comments(31) Trackback(0) Hits(3629)

提醒:

1) 請開啟 Firefox 程式以利取用CSS程式碼。
2) 此樣式可於PIXNET中,張貼於WRETCH適用樣式中。

請至 [艾瑪CSS] 情人節一號 此篇文章中預覽樣式效果

請從下行/***起開始全部複製。

Posted by amarylliss at 痞客邦 PIXNET Comments(2) Trackback(0) Hits(1215)

提醒:

1) 請開啟 Firefox 程式以利取用CSS程式碼。
2) 此樣式可於PIXNET中,張貼於WRETCH適用樣式中。

請至 [艾瑪CSS] 情人節一號 此篇文章中預覽樣式效果

請從下行/***起開始全部複製。

Posted by amarylliss at 痞客邦 PIXNET Comments(5) Trackback(0) Hits(1051)

XMAS_1024_018
/**2006 極簡紅色聖誕#1/

/**提醒:無名小站部落格中若有超過640px大小的圖片者,不適宜使用此CSS。**/
/**PIXNET使用者請依照[推薦] Pixnet 新功能 Photo Auto-resize設定圖片顯示大小**/

 

HTML {
SCROLLBAR-FACE-COLOR: #BD6D6B;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #BD6D6B;
SCROLLBAR-ARROW-COLOR: #fff;
SCROLLBAR-TRACK-COLOR: #BD6D6B;
SCROLLBAR-DARKSHADOW-COLOR: #BD6D6B
}
BODY {
BACKGROUND: #BD6D6B url(http://static.flickr.com/20/72931529_40cddbb342_o.jpg) fixed no-repeat center top;
MARGIN: 0px 0px 0px 0px;
}
A {
FONT-WEIGHT: normal;
COLOR: #999966;
TEXT-DECORATION: none
}
A:link,
A:visited {
COLOR: #8b5f65;
TEXT-DECORATION: none
}
A:active ,
A:hover {
COLOR: #cd919e
}
H1, H2, H3 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
#banner {
TEXT-ALIGN: left;
PADDING-RIGHT: 0px;
PADDING-LEFT: 20px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 20px;
HEIGHT: 140px
}
#banner A,
#banner A:link ,
#banner A:visited,
#banner A:active,
#banner A:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 24px;
COLOR: #fff;
TEXT-DECORATION: none
}
#banner .description {
FONT-WEIGHT: bold;
FONT-SIZE: small;
COLOR: #fff;
FONT-FAMILY: times, serif
}
INPUT,
SELECT,
TEXTAREA{
BORDER:#8b5f65 1px solid;
COLOR:#4f4f4f;
BACKGROUND:#ffffff;
}
#main2{BACKGROUND:#BD6D6B;}
#content {
RIGHT: 10px;
LEFT: 0px;
padding-left:10px;
BOTTOM: 20px;
POSITION: absolute;
TOP: 700px;
width: 660px;
background:#BD6D6B;
filter: alpha(opacity=90);}
#container {
MARGIN: 5px;
BACKGROUND:#BD6D6B
}
#links {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
BACKGROUND:#BD6D6B;
LEFT: 700px;
PADDING-BOTTOM: 10px;
WIDTH: 280px;
PADDING-TOP: 10px;
POSITION: absolute;
TOP: 700px;
}
.blog {
PADDING-RIGHT: 50px;
PADDING-LEFT: 15px;
WIDTH: 650px;
PADDING-TOP: 15px;
BACKGROUND:#BD6D6B;
}
.blogbody {
BORDER: #fff 1px solid;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: 13px;
MARGIN-BOTTOM: 10px;
COLOR: #666;
LINE-HEIGHT: 160%;
FONT-FAMILY: verdana, arial, sans-serif;
BACKGROUND-COLOR: #ffffff;
}
.blogbody A,
.blogbody A:link,
.blogbody A:visited,
.blogbody A:active ,
.blogbody A:hover {
FONT-WEIGHT: normal;
TEXT-DECORATION: underline
}
.side A,
.side A:link,
.side A:visited {
FONT-size: 11px;
color:black;
}
.side A:active ,
.side A:hover{
color: white;
TEXT-DECORATION: underline
}
.title {
BACKGROUND-POSITION: left 50%;
PADDING-LEFT: 16px;
FONT-WEIGHT: bold;
FONT-SIZE: medium;
MARGIN-BOTTOM: 7px;
COLOR: #8b5742;
PADDING-TOP: 2px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: verdana, arial
}
#menu {
BACKGROUND:#BD6D6B;
MARGIN-BOTTOM: 15px
}
.date {
MARGIN-TOP: 23px;
FONT-WEIGHT: bold;
FONT-SIZE: large;
TEXT-TRANSFORM: uppercase;
COLOR: #000;
FONT-FAMILY: verdana, arial, sans-serif
}
.posted {
FONT-SIZE: x-small;
BACKGROUND-IMAGE: none;
MARGIN-BOTTOM: 7px;
COLOR: #999;
FONT-FAMILY: verdana, arial, sans-serif
}
.calendar {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif;
TEXT-ALIGN: center
}
DIV.calendar TABLE {
WIDTH: 88%
}
.calendarhead {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
COLOR: #8b7765;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif
}
.side {
PADDING-RIGHT: 7px;
PADDING-LEFT: 7px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 3px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
LINE-HEIGHT: 160%;
PADDING-TOP: 3px;
FONT-FAMILY: verdana, arial, sans-serif
}
.sidetitle {
BACKGROUND-POSITION: left 50%;
MARGIN-TOP: 10px;
PADDING-LEFT: 18px;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
BORDER-BOTTOM: #000 1px dotted;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: verdana, arial, sans-serif;
LETTER-SPACING: 0.2em;
TEXT-ALIGN: center
}
.syndicate {
PADDING-RIGHT: 2px;
MARGIN-TOP: 10px;
PADDING-LEFT: 2px;
FONT-WEIGHT: bold;
FONT-SIZE: xx-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif;
TEXT-ALIGN: center
}
.powered {
PADDING-RIGHT: 2px;
BORDER-TOP: #ccc 0px solid;
MARGIN-TOP: 10px;
PADDING-LEFT: 2px;
FONT-SIZE: x-small;
PADDING-BOTTOM: 2px;
COLOR: #003366;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
BORDER-BOTTOM: #ccc 0px solid;
FONT-FAMILY: verdana, arial, sans-serif;
LETTER-SPACING: 0.2em;
TEXT-ALIGN: center
}
.comments-head {
BORDER-RIGHT: #cdb7b5 1px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: #cdb7b5 1px solid;
MARGIN-TOP: 5px;
PADDING-LEFT: 3px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 3px;
BORDER-LEFT: #cdb7b5 1px solid;
COLOR: #666;
PADDING-TOP: 3px;
BORDER-BOTTOM: #cdb7b5 1px solid;
FONT-FAMILY: georgia, verdana, arial, sans-serif;
BACKGROUND-COLOR: #fff0f5
}
.comments-body {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fffafa;
PADDING-BOTTOM: 10px;
MARGIN: 5px;
COLOR: #cc9999;
LINE-HEIGHT: 160%;
PADDING-TOP: 5px;
FONT-FAMILY: verdana, arial, sans-serif
}
.comments-post {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 0px;
COLOR: #999;
PADDING-TOP: 0px;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-body {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fff;
PADDING-BOTTOM: 10px;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 10px;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-url {
BORDER-RIGHT: #ccc 1px dashed;
PADDING-RIGHT: 10px;
BORDER-TOP: #ccc 1px dashed;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fff;
PADDING-BOTTOM: 10px;
BORDER-LEFT: #ccc 1px dashed;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 10px;
BORDER-BOTTOM: #ccc 1px dashed;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-post {
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: #fff;
COLOR: #666;
FONT-FAMILY: verdana, arial, sans-serif
}

#footer {
BACKGROUND-POSITION-X: left;
BACKGROUND-IMAGE: none;
BACKGROUND-REPEAT: no-repeat
}
.boxRssList1{
width:220px;
height:220px;
overflow: auto;
overflow-x:hidden;
SCROLLBAR-FACE-COLOR: #BD6D6B;
SCROLLBAR-HIGHLIGHT-COLOR: #cdb7b5;
SCROLLBAR-SHADOW-COLOR: #cdb7b5;
SCROLLBAR-3DLIGHT-COLOR: #BD6D6B;
SCROLLBAR-ARROW-COLOR: #cdb7b5;
SCROLLBAR-TRACK-COLOR: #BD6D6B;
SCROLLBAR-DARKSHADOW-COLOR: #BD6D6B
}

.boxFolder {
width:220px;
height:160px;
overflow: auto;
overflow-x:hidden;
SCROLLBAR-FACE-COLOR: #BD6D6B;
SCROLLBAR-HIGHLIGHT-COLOR: #cdb7b5;
SCROLLBAR-SHADOW-COLOR: #cdb7b5;
SCROLLBAR-3DLIGHT-COLOR: #BD6D6B;
SCROLLBAR-ARROW-COLOR: #cdb7b5;
SCROLLBAR-TRACK-COLOR: #BD6D6B;
SCROLLBAR-DARKSHADOW-COLOR: #BD6D6B
}



 



原文出處: [艾瑪CSS] 2006聖誕極簡紅色系#1


Posted by amarylliss at 痞客邦 PIXNET Comments(1) Trackback(1) Hits(709)

XMAS_1024_2_001
/**2006極簡紅色聖誕#2**/

/**提醒:無名小站部落格中若有超過640px大小的圖片者,不適宜使用此CSS。**/
/**PIXNET使用者請依照[推薦] Pixnet 新功能 Photo Auto-resize設定圖片顯示大小**/

 

HTML {
SCROLLBAR-FACE-COLOR: #B50008;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #B50008;
SCROLLBAR-ARROW-COLOR: #fff;
SCROLLBAR-TRACK-COLOR: #B50008;
SCROLLBAR-DARKSHADOW-COLOR: #B50008
}
BODY {
BACKGROUND: #B50008 url(http://static.flickr.com/20/72893464_abbc39653b_o.jpg) fixed no-repeat center top;
MARGIN: 0px 0px 0px 0px;
}
A {
FONT-WEIGHT: normal;
COLOR: #999966;
TEXT-DECORATION: none
}
A:link,
A:visited {
COLOR: #8b5f65;
TEXT-DECORATION: none
}
A:active ,
A:hover {
COLOR: #cd919e
}
H1, H2, H3 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
#banner {
TEXT-ALIGN: left;
PADDING-RIGHT: 0px;
PADDING-LEFT: 20px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 20px;
HEIGHT: 140px
}
#banner A,
#banner A:link ,
#banner A:visited,
#banner A:active,
#banner A:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 24px;
COLOR: #fff;
TEXT-DECORATION: none
}
#banner .description {
FONT-WEIGHT: bold;
FONT-SIZE: small;
COLOR: #fff;
FONT-FAMILY: times, serif
}
INPUT,
SELECT,
TEXTAREA{
BORDER:#8b5f65 1px solid;
COLOR:#4f4f4f;
BACKGROUND:#ffffff;
}
#main2{BACKGROUND:#B50008;}
#content {
RIGHT: 10px;
LEFT: 0px;
padding-left:10px;
BOTTOM: 700px;
POSITION: absolute;
TOP: 700px;
width: 660px;
background:#B50008;
filter: alpha(opacity=90);
}
#container {
MARGIN: 5px;
BACKGROUND:#B50008
}
#links {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
BACKGROUND:#B50008;
LEFT: 700px;
margin-BOTTOM: 200px;
WIDTH: 280px;
PADDING-TOP: 10px;
POSITION: absolute;
TOP: 700px;
}
.blog {
PADDING-RIGHT: 50px;
PADDING-LEFT: 15px;
WIDTH: 650px;
PADDING-TOP: 15px;
BACKGROUND:#B50008;
}
.blogbody {
BORDER: #fff 1px solid;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: 13px;
MARGIN-BOTTOM: 10px;
COLOR: #666;
LINE-HEIGHT: 160%;
FONT-FAMILY: verdana, arial, sans-serif;
BACKGROUND-COLOR: #ffffff;
}
.blogbody A,
.blogbody A:link,
.blogbody A:visited,
.blogbody A:active ,
.blogbody A:hover {
FONT-WEIGHT: normal;
TEXT-DECORATION: underline
}
.side A,
.side A:link,
.side A:visited {
FONT-size: 11px;
color:black;
}
.side A:active ,
.side A:hover{
color: white;
TEXT-DECORATION: underline
}
.title {
BACKGROUND-POSITION: left 50%;
PADDING-LEFT: 16px;
FONT-WEIGHT: bold;
FONT-SIZE: medium;
MARGIN-BOTTOM: 7px;
COLOR: #8b5742;
PADDING-TOP: 2px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: verdana, arial
}
#menu {
BACKGROUND:#B50008;
MARGIN-BOTTOM: 15px
}
.date {
MARGIN-TOP: 23px;
FONT-WEIGHT: bold;
FONT-SIZE: large;
TEXT-TRANSFORM: uppercase;
COLOR: #000;
FONT-FAMILY: verdana, arial, sans-serif
}
.posted {
FONT-SIZE: x-small;
BACKGROUND-IMAGE: none;
MARGIN-BOTTOM: 7px;
COLOR: #999;
FONT-FAMILY: verdana, arial, sans-serif
}
.calendar {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif;
TEXT-ALIGN: center
}
DIV.calendar TABLE {
WIDTH: 88%
}
.calendarhead {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
COLOR: #8b7765;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif
}
.side {
PADDING-RIGHT: 7px;
PADDING-LEFT: 7px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 3px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
LINE-HEIGHT: 160%;
PADDING-TOP: 3px;
FONT-FAMILY: verdana, arial, sans-serif
}
.sidetitle {
BACKGROUND-POSITION: left 50%;
MARGIN-TOP: 10px;
PADDING-LEFT: 18px;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
BORDER-BOTTOM: #000 1px dotted;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: verdana, arial, sans-serif;
LETTER-SPACING: 0.2em;
TEXT-ALIGN: center
}
.syndicate {
PADDING-RIGHT: 2px;
MARGIN-TOP: 10px;
PADDING-LEFT: 2px;
FONT-WEIGHT: bold;
FONT-SIZE: xx-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif;
TEXT-ALIGN: center
}
.powered {
PADDING-RIGHT: 2px;
BORDER-TOP: #ccc 0px solid;
MARGIN-TOP: 10px;
PADDING-LEFT: 2px;
FONT-SIZE: x-small;
PADDING-BOTTOM: 2px;
COLOR: #003366;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
BORDER-BOTTOM: #ccc 0px solid;
FONT-FAMILY: verdana, arial, sans-serif;
LETTER-SPACING: 0.2em;
TEXT-ALIGN: center
}
.comments-head {
BORDER-RIGHT: #cdb7b5 1px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: #cdb7b5 1px solid;
MARGIN-TOP: 5px;
PADDING-LEFT: 3px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 3px;
BORDER-LEFT: #cdb7b5 1px solid;
COLOR: #666;
PADDING-TOP: 3px;
BORDER-BOTTOM: #cdb7b5 1px solid;
FONT-FAMILY: georgia, verdana, arial, sans-serif;
BACKGROUND-COLOR: #fff0f5
}
.comments-body {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fffafa;
PADDING-BOTTOM: 10px;
MARGIN: 5px;
COLOR: #cc9999;
LINE-HEIGHT: 160%;
PADDING-TOP: 5px;
FONT-FAMILY: verdana, arial, sans-serif
}
.comments-post {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 0px;
COLOR: #999;
PADDING-TOP: 0px;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-body {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fff;
PADDING-BOTTOM: 10px;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 10px;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-url {
BORDER-RIGHT: #ccc 1px dashed;
PADDING-RIGHT: 10px;
BORDER-TOP: #ccc 1px dashed;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fff;
PADDING-BOTTOM: 10px;
BORDER-LEFT: #ccc 1px dashed;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 10px;
BORDER-BOTTOM: #ccc 1px dashed;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-post {
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: #fff;
COLOR: #666;
FONT-FAMILY: verdana, arial, sans-serif
}

#footer {
BACKGROUND-POSITION-X: left;
BACKGROUND-IMAGE: none;
BACKGROUND-REPEAT: no-repeat
}
.boxRssList1{
width:220px;
height:220px;
overflow: auto;
overflow-x:hidden;
SCROLLBAR-FACE-COLOR: #B50008;
SCROLLBAR-HIGHLIGHT-COLOR: #cdb7b5;
SCROLLBAR-SHADOW-COLOR: #cdb7b5;
SCROLLBAR-3DLIGHT-COLOR: #B50008;
SCROLLBAR-ARROW-COLOR: #cdb7b5;
SCROLLBAR-TRACK-COLOR: #B50008;
SCROLLBAR-DARKSHADOW-COLOR: #B50008
}

.boxFolder {
width:220px;
height:160px;
overflow: auto;
overflow-x:hidden;
SCROLLBAR-FACE-COLOR: #B50008;
SCROLLBAR-HIGHLIGHT-COLOR: #cdb7b5;
SCROLLBAR-SHADOW-COLOR: #cdb7b5;
SCROLLBAR-3DLIGHT-COLOR: #B50008;
SCROLLBAR-ARROW-COLOR: #cdb7b5;
SCROLLBAR-TRACK-COLOR: #B50008;
SCROLLBAR-DARKSHADOW-COLOR: #B50008
}



 



原文出處: [艾瑪CSS] 2006聖誕極簡紅色系#2


Posted by amarylliss at 痞客邦 PIXNET Comments(1) Trackback(2) Hits(1146)

XMAS_1024_022
/**2006 極簡紅色聖誕#3**/

/**提醒:無名小站部落格中若有超過640px大小的圖片者,不適宜使用此CSS。**/
/**PIXNET使用者請依照[推薦] Pixnet 新功能 Photo Auto-resize設定圖片顯示大小**/

 

HTML {
SCROLLBAR-FACE-COLOR: #DEAACE;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #DEAACE;
SCROLLBAR-ARROW-COLOR: #fff;
SCROLLBAR-TRACK-COLOR: #DEAACE;
SCROLLBAR-DARKSHADOW-COLOR: #DEAACE
}
BODY {
BACKGROUND: #DEAACE fixed repeat left top;
MARGIN: 0px 0px 0px 0px;
}
A {
FONT-WEIGHT: normal;
COLOR: #999966;
TEXT-DECORATION: none
}
A:link,
A:visited {
COLOR: #8b5f65;
TEXT-DECORATION: none
}
A:active ,
A:hover {
COLOR: #cd919e
}
H1, H2, H3 {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
#banner {
background:url(http://static.flickr.com/34/72931730_893edcb6c4_o.jpg) no-repeat center top;
TEXT-ALIGN: left;
PADDING-RIGHT: 0px;
PADDING-LEFT: 20px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 20px;
HEIGHT: 700px
}
#banner A,
#banner A:link ,
#banner A:visited,
#banner A:active,
#banner A:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 24px;
COLOR: #fff;
TEXT-DECORATION: none
}
#banner .description {
FONT-WEIGHT: bold;
FONT-SIZE: small;
COLOR: #fff;
FONT-FAMILY: times, serif;
text-align:left;
}
INPUT,
SELECT,
TEXTAREA{
BORDER:#8b5f65 1px solid;
COLOR:#4f4f4f;
BACKGROUND:#ffffff;
}
#main2{BACKGROUND:#DEAACE;}
#content {
RIGHT: 10px;
LEFT: 0px;
padding-left:10px;
BOTTOM: 20px;
POSITION: absolute;
TOP: 700px;
width: 660px;
background:#DEAACE;
/*filter: alpha(opacity=90);*/
}
#container {
MARGIN: 5px;
BACKGROUND:#DEAACE
}
#links {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
BACKGROUND:#DEAACE;
LEFT: 700px;
PADDING-BOTTOM: 10px;
WIDTH: 280px;
PADDING-TOP: 10px;
POSITION: absolute;
TOP: 700px;
}
.blog {
PADDING-RIGHT: 50px;
PADDING-LEFT: 15px;
WIDTH: 650px;
PADDING-TOP: 15px;
BACKGROUND:#DEAACE;
}
.blogbody {
BORDER: #fff 1px solid;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: 13px;
MARGIN-BOTTOM: 10px;
COLOR: #666;
LINE-HEIGHT: 160%;
FONT-FAMILY: verdana, arial, sans-serif;
BACKGROUND-COLOR: #ffffff;
}
.blogbody A,
.blogbody A:link,
.blogbody A:visited,
.blogbody A:active ,
.blogbody A:hover {
FONT-WEIGHT: normal;
TEXT-DECORATION: underline
}
.side A,
.side A:link,
.side A:visited {
FONT-size: 11px;
color:black;
}
.side A:active ,
.side A:hover{
color: white;
TEXT-DECORATION: underline
}
.title {
BACKGROUND-POSITION: left 50%;
PADDING-LEFT: 16px;
FONT-WEIGHT: bold;
FONT-SIZE: medium;
MARGIN-BOTTOM: 7px;
COLOR: #8b5742;
PADDING-TOP: 2px;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: verdana, arial
}
#menu {
BACKGROUND:#DEAACE;
MARGIN-BOTTOM: 15px
}
.date {
MARGIN-TOP: 23px;
FONT-WEIGHT: bold;
FONT-SIZE: large;
TEXT-TRANSFORM: uppercase;
COLOR: #000;
FONT-FAMILY: verdana, arial, sans-serif
}
.posted {
FONT-SIZE: x-small;
BACKGROUND-IMAGE: none;
MARGIN-BOTTOM: 7px;
COLOR: #999;
FONT-FAMILY: verdana, arial, sans-serif
}
.calendar {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif;
TEXT-ALIGN: center
}
DIV.calendar TABLE {
WIDTH: 88%
}
.calendarhead {
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
FONT-WEIGHT: bold;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
COLOR: #8b7765;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif
}
.side {
PADDING-RIGHT: 7px;
PADDING-LEFT: 7px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 3px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
LINE-HEIGHT: 160%;
PADDING-TOP: 3px;
FONT-FAMILY: verdana, arial, sans-serif
}
.sidetitle {
BACKGROUND-POSITION: left 50%;
MARGIN-TOP: 10px;
PADDING-LEFT: 18px;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
TEXT-TRANSFORM: uppercase;
COLOR: #fff;
PADDING-TOP: 2px;
BORDER-BOTTOM: #000 1px dotted;
BACKGROUND-REPEAT: no-repeat;
FONT-FAMILY: verdana, arial, sans-serif;
LETTER-SPACING: 0.2em;
TEXT-ALIGN: center
}
.syndicate {
PADDING-RIGHT: 2px;
MARGIN-TOP: 10px;
PADDING-LEFT: 2px;
FONT-WEIGHT: bold;
FONT-SIZE: xx-small;
BACKGROUND: none;
PADDING-BOTTOM: 2px;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
FONT-FAMILY: verdana, arial, sans-serif;
TEXT-ALIGN: center
}
.powered {
PADDING-RIGHT: 2px;
BORDER-TOP: #ccc 0px solid;
MARGIN-TOP: 10px;
PADDING-LEFT: 2px;
FONT-SIZE: x-small;
PADDING-BOTTOM: 2px;
COLOR: #003366;
LINE-HEIGHT: 160%;
PADDING-TOP: 2px;
BORDER-BOTTOM: #ccc 0px solid;
FONT-FAMILY: verdana, arial, sans-serif;
LETTER-SPACING: 0.2em;
TEXT-ALIGN: center
}
.comments-head {
BORDER-RIGHT: #cdb7b5 1px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: #cdb7b5 1px solid;
MARGIN-TOP: 5px;
PADDING-LEFT: 3px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
MARGIN-BOTTOM: 5px;
PADDING-BOTTOM: 3px;
BORDER-LEFT: #cdb7b5 1px solid;
COLOR: #666;
PADDING-TOP: 3px;
BORDER-BOTTOM: #cdb7b5 1px solid;
FONT-FAMILY: georgia, verdana, arial, sans-serif;
BACKGROUND-COLOR: #fff0f5
}
.comments-body {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fffafa;
PADDING-BOTTOM: 10px;
MARGIN: 5px;
COLOR: #cc9999;
LINE-HEIGHT: 160%;
PADDING-TOP: 5px;
FONT-FAMILY: verdana, arial, sans-serif
}
.comments-post {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: none;
PADDING-BOTTOM: 0px;
COLOR: #999;
PADDING-TOP: 0px;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-body {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fff;
PADDING-BOTTOM: 10px;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 10px;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-url {
BORDER-RIGHT: #ccc 1px dashed;
PADDING-RIGHT: 10px;
BORDER-TOP: #ccc 1px dashed;
PADDING-LEFT: 10px;
FONT-WEIGHT: normal;
FONT-SIZE: small;
BACKGROUND: #fff;
PADDING-BOTTOM: 10px;
BORDER-LEFT: #ccc 1px dashed;
COLOR: #666;
LINE-HEIGHT: 160%;
PADDING-TOP: 10px;
BORDER-BOTTOM: #ccc 1px dashed;
FONT-FAMILY: verdana, arial, sans-serif
}
.trackback-post {
FONT-WEIGHT: normal;
FONT-SIZE: x-small;
BACKGROUND: #fff;
COLOR: #666;
FONT-FAMILY: verdana, arial, sans-serif
}

#footer {
BACKGROUND-POSITION-X: left;
BACKGROUND-IMAGE: none;
BACKGROUND-REPEAT: no-repeat
}
.boxRssList1{
width:220px;
height:220px;
overflow: auto;
overflow-x:hidden;
SCROLLBAR-FACE-COLOR: #DEAACE;
SCROLLBAR-HIGHLIGHT-COLOR: #cdb7b5;
SCROLLBAR-SHADOW-COLOR: #cdb7b5;
SCROLLBAR-3DLIGHT-COLOR: #DEAACE;
SCROLLBAR-ARROW-COLOR: #cdb7b5;
SCROLLBAR-TRACK-COLOR: #DEAACE;
SCROLLBAR-DARKSHADOW-COLOR: #DEAACE
}

.boxFolder {
width:220px;
height:160px;
overflow: auto;
overflow-x:hidden;
SCROLLBAR-FACE-COLOR: #DEAACE;
SCROLLBAR-HIGHLIGHT-COLOR: #cdb7b5;
SCROLLBAR-SHADOW-COLOR: #cdb7b5;
SCROLLBAR-3DLIGHT-COLOR: #DEAACE;
SCROLLBAR-ARROW-COLOR: #cdb7b5;
SCROLLBAR-TRACK-COLOR: #DEAACE;
SCROLLBAR-DARKSHADOW-COLOR: #DEAACE
}


 



原文出處: [艾瑪CSS] 2006聖誕極簡紅色系#3


Posted by amarylliss at 痞客邦 PIXNET Comments(0) Trackback(1) Hits(577)


[預覽畫面] #01襪中的聖誕老公公 #02白色聖誕節

使用說明,這兩款只有底圖改變,其他都不變,因此如果要直接複製這兩款過去,請決定要讓他出現哪一張底圖,接著修改不出現的底圖,方式如下:

★ 讓#01底圖出現

background:#FFF url(http://static.flickr.com/35/72932569_7184f18d2b_o.jpg) top center;/*01底圖*/
/*background:#FFF url(http://static.flickr.com/34/72932542_32fbc0ce28_o.jpg) top center; 02底圖*/

讓#02底圖出現

/*background:#FFF url(http://static.flickr.com/35/72932569_7184f18d2b_o.jpg) top center; 01底圖*/
background:#FFF url(http://static.flickr.com/34/72932542_32fbc0ce28_o.jpg) top center; /*02底圖*/

簡單改一下就可以同時複製兩個CSS囉~

四張底圖的網址
 
XMAS_1024_013 XMAS_1024_012
1 2
http://static.flickr.com/35/72932569_7184f18d2b_o.jpg http://static.flickr.com/34/72932542_32fbc0ce28_o.jpg
XMAS_1024_011 XMAS_1024_006
3 4
http://static.flickr.com/20/72932517_59ef3fcfd3_o.jpg http://static.flickr.com/34/72932281_656dc7b1c7_o.jpg


 

 

/************2006 Xmas CSS01&02************/


 

body {
margin: 0px 0px 20px 0px;
background:#FFF;
}
A { color: #336666; text-decoration: none;}
A:link { color: #336666; text-decoration: none; }
A:visited { color: #336666; text-decoration: none; }
A:active { color: #669999; }
A:hover { color: #669999; }

h1, h2, h3 {
margin: 0px;
padding: 0px;
}

#banner {
font-family:verdana, arial, sans-serif;
color:#CC9933;
font-size:x-large;
font-weight:bold;
background:#FFF url(http://static.flickr.com/35/72932569_7184f18d2b_o.jpg) top center;/*01底圖*/
background:#FFF url(http://static.flickr.com/34/72932542_32fbc0ce28_o.jpg) top center; /*02底圖*/
padding-left:15px;
height:750px;
}

#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
font-family:verdana, arial, sans-serif;
font-size: x-large;
color: #ff0000;
text-decoration: none;
}

.description {
font-family:verdana, arial, sans-serif;
color:#CCC;
font-size:11px;
font-weight:bold;
background:none;
text-transform:none;
letter-spacing: none;
}

#content {
float:left;
width:65%;
background:#FFF;
margin-left:10px;
margin-right:15px;
margin-bottom:20px;
position: absolute;
}

#links {
width:30%;
background:#FFF;
margin-left:68%;
color:#CCC;
margin-top:35px;
margin-right:15px;
position: absolute;
}

.blog {
padding-left:15px;
padding-top:15px;
padding-right:15px;
}
.blogbody img{ max-width: 640px;}
.blogbody {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:small;
font-weight:normal;
background:#FFF;
line-height:160%;
border-left:1px dotted #666;
border-right:1px dotted #666;
border-bottom:1px dotted #666;
padding:10px;
}

.blogbody a,
.blogbody a:link,
.blogbody a:visited,
.blogbody a:active,
.blogbody a:hover {
font-weight: normal;
text-decoration: underline;
}

.title {
font-family: verdana, arial;
font-size: 16px;
color: #CCC;
font-weight:bold;
}

#menu {
margin-bottom:10px;
background:#FFF;
font-size:small;
font-weight:bold;
}

.date {
font-family:verdana, arial, sans-serif;
font-size: 24px;
color: #690;
font-weight:bold;
text-transform:uppercase;
margin-top:50px;
border-bottom:1px dotted #666;
}

.posted {
font-family:verdana, arial, sans-serif;
font-size: x-small;
color: #690;
}


.calendar {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:11px;
font-weight:normal;
padding:5px;
}

.calendarhead {
font-family:verdana, arial, sans-serif;
color:#CC9933;
font-size:11px;
font-weight:bold;
background:#FFF;
line-height:160%;
}

.side {
font-family:verdana, arial, sans-serif;
color:#CCC;
font-size:11px;
font-weight:normal;
background:#FFF;
line-height:160%;
}

.sidetitle {
font-family:verdana, arial, sans-serif;
color:#690;
font-size:16px;
font-weight:bold;
background:#FFF;
line-height:160%;
padding-top:2px;
padding-bottom:2px;
margin-top:10px;
margin-bottom: 5px;
border-bottom:1px dotted #ccc;
letter-spacing: .2em;
}

.syndicate {
font-family:verdana, arial, sans-serif;
font-size:xx-small;
font-weight:bold;
line-height:160%;
padding:2px;
margin-top:10px;
text-align:center;
background:#FFF;
}

.powered {
font-family:verdana, arial, sans-serif;
color:#CCC;
font-size:xx-small;
font-weight:bold;
border-top:1px dotted #666;
border-bottom:1px dotted #666;
line-height:160%;
padding:2px;
margin-top:10px;
text-align:center;
letter-spacing: .2em
background:#FFF;
}


.comments-body {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:small;
font-weight:normal;
background:#FFF;
line-height:160%;
padding-bottom:10px;
}

.comments-post {
font-family:verdana, arial, sans-serif;
color:#690;
font-size:11px;
font-weight:normal;
background:#FFF;
margin-top:0px;
}

.comments-head {
font-family:verdana, arial, sans-serif;
font-size: 14px;
color: #690;
font-weight:bold;
margin-top:10px;
border-bottom:1px dotted #666;
}

.trackback-body {
font-family:verdana, arial, sans-serif;
color:#333;
font-size:small;
font-weight:normal;
background:#FFF;
line-height:160%;
padding-top:15px;
}

.trackback-url {
font-family:verdana, arial, sans-serif;
color:#666;
font-size:small;
font-weight:normal;
background:#ebebeb;
line-height:160%;
padding:5px;
border:0px dotted #666;
}

.trackback-post {
font-family:verdana, arial, sans-serif;
color:#690;
font-size:11px;
font-weight:normal;
background:#FFF;
margin-bottom:20px;
}



textarea {
border: 1px solid #ccc; height: 250px;
background: none url(http://static.flickr.com/20/72932412_09ba8db5c5.jpg) no-repeat 150px center;
}


 



原文出處: [艾瑪CSS] 2006聖誕極簡白色系#01~04


Posted by amarylliss at 痞客邦 PIXNET Comments(1) Trackback(1) Hits(1004)

又有一陣子沒有玩CSS了,因為太多CSS高手,輪不到我這種小卡司來跑龍套。不過,下午一時手癢玩了一下下,拿了最簡單的樣式來取代幾個數值,就變成上面這個樣子了,屬於最簡單、最清爽的頁面種類。不知道還可以嗎?

這樣的CSS就是跟每次刊載巴黎漫遊記事時的版頭一樣,一開頁面會呈現全版的圖片(有點像是傳統首頁樣式),往下捲才看得到本文,有好有壞。好處是還蠻清爽的,壞處是有人的網路下載FLICKR照片很慢(不過一張圖也沒幾K,應該還好),再說還有快取可以讀,所以不至於會慢到變成龜速吧。

我找了三種色系,總共十八張圖,想要把他做成紅、白、藍三種色系的CSS(其中紅色有一款去年我做過),有人有興趣嗎?如果沒有人有興趣,那我就不要獻醜了:P

 

 

XMAS_1024_018
XMAS_1024_2_001

XMAS_1024_022

 

 
  • [艾瑪CSS] 2006聖誕極簡藍色系#01 #02

 
  • [艾瑪CSS] 2006聖誕極簡藍色系#03 #04

 
  • [艾瑪CSS] 2006聖誕極簡藍色系#05 #06

 



原文出處: [艾瑪CSS] 2006聖誕三色系


Posted by amarylliss at 痞客邦 PIXNET Comments(0) Trackback(0) Hits(555)

CSS 大方送又來了!!!

  • 版本:[清新綠野] 小王子與小狐狸
  • 版本特色:即使是非VIP也可以消除相本和留言版廣告
  • 拿取CSS的原則:不可改動CSS、不再次分享
  • 補充說明:http://www.wretch.cc/blog/tarosan&article_id=5045867
    (相本、留言板需固定背景可以修改)
  • 時間:2006/9/7 18:00~24:00 (密碼六點準時公布)已截止!
  • 對象:

***幫艾瑪投票送我去巴黎的所有朋友(如果你來不及拿取,請留悄悄話文中包含「艾瑪,我有投票給你喔!」並留下你的 MAIL,我會寄給你!)一天之內,也就是至 9/9 00:00有效喔~ 留言前,請確認您曾經在這篇文章中留過言。若不符合上述,恕不寄送。

***上述時間有到訪艾瑪隨處走走的留言訪客

 

網誌 [艾瑪CSS] 清新綠野。小王子與小狐狸(blog)

留言版 [艾瑪CSS] 清新綠野。小王子與小狐狸(gb)

相本 [艾瑪CSS] 清新綠野。小王子與小狐狸(album)

個人資料 [艾瑪CSS] 清新綠野。小王子與小狐狸(user)


Posted by amarylliss at 痞客邦 PIXNET Comments(145) Trackback(0) Hits(609)

  • This article requires a password to view, please enter password.
  • Password Hint:
  • Enter Password:
  • This article requires a password to view, please enter password.
  • Password Hint:
  • Enter Password:
  • This article requires a password to view, please enter password.
  • Password Hint:
  • Enter Password:
  • This article requires a password to view, please enter password.
  • Password Hint:
  • Enter Password:
  • This article requires a password to view, please enter password.
  • Password Hint:
  • Enter Password:
1 2 3 4 5