YOOtheme
關閉

登入/註冊

設計教學 x 最新留言

  • A-line Wedding DressesA-line Bridal GownsA-line DressesLace A-line Wedding Dressescheap A-line Wedding DressesPearl NecklaceQuinceanera...
    rulemanmason

    rulemanmason

    20. 五月, 2012 |

  • 謝謝你的分享
    Hannah Lin

    Hannah Lin

    17. 五月, 2012 |

  • Dear A-chen yang,

    不知道你卡在哪一關？第一篇的教學主要就是鍵入字體後轉成外框字，然後再透過筆刷工具去把毛邊給塗抹出來。慢工出細活，加油！

    Phil
    philsu

    philsu

    08. 五月, 2012 |

  • 哈 你網頁設計太好了吧，糟糕我再第一關就卡關，1. Create a Furry Calligram in Illustrator
    他是不是要自己建立新的筆刷，然後再賦予，越簡單東西越困難嗎?
    A-chen yang

    A-chen yang

    13. 三月, 2012 |

  • 不客氣，也很高興這個教學對你有幫助：D
    Phil Su

    Phil Su

    27. 十月, 2011 |

三11

不需圖片，用CSS3就能做出超美圖框！

Author // 飛爾酥│Philsu Categories // CSS Views // 3111

CSS3跟HTML5的持續發燒，有許多的互動或圖像介面都已經可以直接透過網頁技術來實現！而不用經過繪圖軟體的設計，只要熟悉相關的語法就能省下相當多的功夫，也能加快網站的loading存取速度。

今天飛爾酥要介紹的就是透過CSS3來製作出各式各樣的圖文框BOX，這些圖框在以往都必定要透過Photoshop等軟體繪製後再切版再上傳到網站，但是看過今天的教學絕對讓你為之驚艷！趕緊來學一學吧！

先來看看下方的完成效果吧：

接下來進入圖文教學部分：

首先設定CSS 

@charset "utf-8";
/* CSS Document */

@import url(css/reset.css);

/*******************/
/*** General Page **/
/*******************/
body{
	background: url(img/background_1.png);
}
.wrapper{
	width: 960px;
	overflow: hidden;
	margin: auto;
	padding: 60px 0 100px;
}
#header{
	width: 100%;
	background:url(img/bkg_header.png) repeat-x;
}
.header_content{
	width: 1000px;
	height: 125px;
	margin: auto;
}
.set_item{
	width: 400px;
	float: left;
}

.shk_bundle{
	position: fixed;
	right:0;
	bottom: 10px;
}
.shk_bundle a{
	outline: none;
}
.clear{
	clear:both;
}
#footer{
	width: 100%;
	background: url(img/bkg_footer.png);
}
.footer_content{
	height: 155px;
	width: 1000px;
	margin: auto;
}
/*** end general page ***/

以下列舉5款給大家參考：

/* This establishes the design of the boxes' paragraphs */
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
margin: 30px;
color: #aaa;
outline: none;
}

/* In this selector we specify  the width, height, borders, position, background color, color and shadow's dimensions */
.box1{
width: 300px;
margin: 40px;
min-height: 200px;
position:relative;
display: inline-block;
background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
-webkit-border-bottom-right-radius: 6px 50px;
}

/* On this pseudo class we specify the design that goes prior the box1 class, in this case it's the shadow placed at the bottom of this box, here's where we determine the measures, rotation and skew of the shadow itself */
.box1:before{
content: '';
width: 50px;
height: 100px;
position:absolute;
bottom:0; right:0;
-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
z-index:-1;
-webkit-transform: translate(-35px,-40px)
skew(0deg,30deg)
rotate(-25deg);
}

/* On this pseudo class we specify the design that goes prior the box1 class, in this case it's the shadow placed on top of the box, here's where we determine the measures, rotation and the skew of the shadow itself*/
.box1:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(20px,25px)
skew(20deg);
}
/* This is the selector of the eleventh box, here's where we establish the measures, background colors, borders and shadows */
.box11{
margin: 50px;
width: 300px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
border-top: 1px solid white;
border-right: 1px solid #ccc;
-webkit-border-bottom-right-radius: 60px 60px;
-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}
/* This pseudo class creates the bottom fold */
.box11:before{
content:'';
width: 25px;
height: 20px;
background: white;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
-webkit-border-bottom-right-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
transform: rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
}

/* This is the shading of the fold */
.box11:after{
content: '';
z-index: -1;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
right:0;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
translate(-45px,-20px)
skew(20deg);
}

/* This is the top tape of the box */
.box11_tape{
position:absolute;
top:-25px; left: 30%;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
/* This is the selector of the fifteenth box, here's where we establish the measures, background colors, borders and shadows */
.box15{
margin: 50px;
width: 320px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
-webkit-border-bottom-right-radius: 60px 5px;

}

/* This pseudo class creates the multiple sheets effect */
.box15:before{
content: '';
width: 98%;
z-index:-1;
height: 100%;
padding: 0 0 1px 0;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
-webkit-border-bottom-right-radius: 60px 5px;
-webkit-transform: skew(2deg,2deg)
translate(3px,8px)
}
.box15:after{
content: '';
width: 98%;
z-index:-1;
height: 98%;
padding: 0 0 1px 0;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
-webkit-transform: skew(2deg,2deg)
translate(-1px,2px)
}

/* This class creates the top left tape */
.box15_tape{
position:absolute;
top:0; left: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
}
/* This is the selector of the seventh box, here's where we establish the measures, background colors, borders and shadows */
.box7{
margin: 50px;
width: 320px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2) ;
}

/* This is the top left tape */
.box7:before{
content: '';
position:absolute;
width: 130px;
height: 30px;
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform:translate(-50px,10px)
skew(10deg,10deg)
rotate(-50deg)
}
/* This is the top bottom right tape */
.box7:after{
content: '';
position:absolute;
right:0;
bottom:0;
width: 130px;
height: 30px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: translate(50px,-20px)
skew(10deg,10deg)
rotate(-50deg)
}
/* This is the selector of the sixteenth box, here's where we establish the measures, background colors, borders and shadows */
.box16{
margin: 70px 50px;
width: 300px;
min-height: 250px;
position:relative;
border: 2px solid #ccc;
background: rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}

/* This is the picture's frame */
.box16:before{
content: '';
width: 110%;
left: 0;
height: 125%;
z-index:-1;
position:absolute;
border: 1px solid #ccc;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
-webkit-transform: translate(-5%,-5%);
}
/* This pseudo class creates the frame's shadow */
.box16:after{
content: '';
width: 100%;
left: 0;
height: 115%;
z-index:-2;
background: none;
position:absolute;
border-radius: 20px;
-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
-webkit-transform: translate(0,0);
}
/* This selector and pseudo class creates the tapes of the top left sector */
.box16_tape{
position:absolute;
top:0; left: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
}
.box16_tape:before{
content: '';
position:absolute;
top:0; left: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
}

你還可以：

點此線上觀看Demo（使用google chrome 或 Safari）

下載全部15款的原始範例檔

參考資料

http://www.tutorialshock.com

駐站作家

飛爾酥│Philsu

飛爾酥│Philsu

熱衷網站架設、影像處理、數位設計、後製剪輯、詞曲創作。做過數個網站，當過街頭藝人，默默參加各種網路社群活動。而人生志向是蓋一座貓咪花園收養浪貓。

這個 E-mail 地址已經被防止灌水惡意程式保護，您需要啟用 Java Script 才能觀看 | 飛爾酥創意設計

Comments (0)

說說話吧！Leave a comment

點擊下方按鈕就可以用臉書/推特帳號留言囉！

取消 送出留言...