Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【CSS】 写輪眼✨♪(੭ˊ꒳​ˋ)੭✧

デザインが素敵だったので、見様見真似で作ってみました。

最近「見様見真似」(最近まで"みおうみまね"だと思ってました😅w ) 多用?中~ ₍₍(꒪່౪̮꒪່)⁾⁾✨♪

 

 

<CSS 3> Linear-Granidient

 その1

CSS3 Gradients - W3Schools

f:id:DDramonQ:20160719210445j:plain

f:id:DDramonQ:20160719210453j:image

 

 

 

 

 

 その2

SearchSOA.com

f:id:DDramonQ:20160719210502j:image

f:id:DDramonQ:20160719210505j:image

 

 

 ソースコードを見ずに、自分の学習進度の確認も兼ねて作ってみました。ただ、、やはり曖昧な部分もあり、w3shoolさんの「Gradients -CSS Tutorial  - 」を再確認しながらでした😅ww w3sさんのDiploma(卒業証明証 )が~(ノ")`ω´(ヾ))ウーンッᵎ💦w

 

 

 

 

作ってみたよ🌟

 
#grad1-1
 
#grad1-2
 
#grad2-1
 
#grad2-2
 
 #grad3-1
Linear Gradient!
 #grad3-2
Linear Gradient!
 

 

 

#grad1-1 {
   height:12px;
   background:repeating-linear-gradient(-45deg, #fff 0.5%, lightgrey 1%, #fff 1.5% );
   margin:0; }
   
#grad1-2 {
   height:18px;   
   background:repeating-linear-gradient(-45deg, #fff 0.5%, lightgrey 1%, #fff 1.5% );
   margin:0; }

 

#grad2-1 {
   height:12px;   
   background:repeating-linear-gradient(-45deg, #fff .6%, lightgrey 1.3%, #fff 2%);
   margin:0; }
   
#grad2-2 {
   height:18px;
   background:repeating-linear-gradient(-45deg, #fff .6%, lightgrey 1.3%, #fff 2%);
   margin:0; }

 

#grad3-1 {
   height:300px;
   background:linear-gradient(135deg, #00c6c9 50%, #00bdef);  
   text-align:center;
   font-family:sans-serif;
   padding:25px;
   font-size:30px;
   color:#333939 }
#grad3-2 {
   height:300px;
   background:linear-gradient(135deg, #00c6c9, #00bdef);  
   text-align:center;
   font-family:sans-serif;
   padding:25px;
   font-size:30px;
   color:#333939 }

 

 

Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️