ئەزا باش سۈرىتىنى يوملاق چىقىرىش

yadikar

ئەزا باش سۈرىتىنى css ئارقىلىق يوملاق چىقىرىش

ئالدىنقى تېمدا ئەزا باش سۈرىتنى يوملاق چىقىرىش ئۈچۈن بىر قىستۇرما يوللىغان ئىدىم، بىراق بۇنداق قىلىشىم ئانچە ئاقلانلىق بولىمغانلىقنى، ھەمدە بۇنداق قېلىشنىڭ پاشىغا بومبا ئاتقاندەك بولۇپ قالغانىلقىنى تورداشلار ئوتتۇرىغا قويۇپتۇ.
ئىنكاسلار ئىچىدە نۇرقۇت ئەپەندى، نۇرقۇت تورى ئىشلەتكەن كودنى قالدۇرۇپ قويۇپتۇ، مەن شۇ كود ئارقىلىق ئەمىلىگە ئاشۇردۇم.
ھەمدە بۇ كودنى قەيەرگە قۇيۇشنى بىلمەي ئولتۇرغان دىسكازچىلار بولسا پايدىلىنىپ قالسا ئەجەب ئەمەس دەپ يەنە بۇ ئوخشاش مەزمۇندىكى تېمىنى تەكىرار يوللاشقا مەجبۇر بولۇپ قالدىم.

سىز ئالدى بىلەن بوشلۇققا ئۆتۈپ /template/default/common/ ئىچىدىكى module.cssنى خاتىرە دەپتەردە ئېچىپ، تۆۋەندىكى كودنى تېپىڭ.

1. .pls .avatar img { padding: 5px 5px 8px; background: #FFF url({IMGDIR}/midavt_shadow.gif) 0 0% repeat-x; }

مەزمۇننى كۆچۈرۈۋېلىش

يۇقىرىقى كودنىڭ ئاستىغا مەۋۇ نۇرقۇت ئەپەندى تەمىنلىگەن كودنى قوشۇپ ساقلاپ، ئەسلىي module.css بىلەن ئالماشتۇرۇپ، ئارقا بەتتىن قالدۇق تازىلاڭ

1. #ct .pls .avatar img, .bui .m img {   
   
2.     height: 120px;   
   
3.     width: 120px;   
   
4.     padding: 2px;   
   
5.     border: 2px solid #AFDB12;   
   
6.     border-radius: 50%;   
   
7.     background-color: transparent;   
   
8. }

مەزمۇننى كۆچۈرۈۋېلىش

مەنبە: نۇرقۇت دۇنياسى

yadikar

ئۈستۈنكى تىمىدا دىسكازدا ئەزا باش سۆرتىنى يوملاق چىقىرىش توغىرىسدا سۆزلەنگەن.
بۈگۈن ئەمدى ئاشۇ يوملاق چىقارغان باش سۆرەتىنى مائۇس ئەپكەلسە پىرقىرىتىش ئۇسۇلنى تونۇشتۇرۇلدى.
تۆۋەندىكى پىرقىرىتىش كودى يەنى ئالدىنقى قېتىم 4بىل دېگەن ئەزا يوللىغان، wordpressدە باش سۈرەتنى يۇمىلاق قىلىپ پىرقىرىتىش دېگەن تېمسىدىكى كود شۇ، مەن بۇنىڭ ئازىراقلا ئارتۇقچە ئورنىنى ئېلۋىتىپ بۇنى دىسكازغا ئۇرۇنلاشتۇردۇم.

ئىشلىتىش ئۇسۇلى ئالدىنقى قېتىم مەن يوللىغان دىسكازدا ئەزا باش سۆرتنى css ئارقىلىق يۇمىلاق چىقىرىش، دېگەن تېمامدىكى كودنىڭ ئاستىغا قويسىڭىزلا بولىدۇ.
باش سۆرەتنى تېخى يوملاق قىلمىغان بولسىڭىز يۇقۇردىكى تىمىدىن پايدىلىنىڭ.
باش سۆرەتنى يوملاق قىلىش كودنى تېمدا دىيىلىگەن ئورۇنغا قۇيۇپ ئاندىن ماۋۇ كودنى ئاستغا قۇيسىڭىزلا كۇپايە.

1. .avatar{float:right;margin-right:-5px;padding:1px; /*设置图像的长和宽*/      
   
2.     border-radius: 100px;/*设置图像圆角效果,在这里我直接  
   
3.   
   
4. 设置了超过width/2的像素，即为圆形了*/      
   
5.     -webkit-border-radius: 100px;/*圆角效果：兼容webkit浏览器*/      
   
6.     -moz-border-  
   
7.   
   
8. radius:20px;      
   
9.     box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/      
   
10.     -webkit-box-shadow: inset 0 -1px 0 #3333sf;      
    
11.     -webkit-transition: 0.4s;           
    
12.     -webkit-transition: -webkit-transform 0.4s ease-out;      
    
13.     transition: transform 0.4s   
    
14.   
    
15. ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/      
    
16.     -moz-transition: -moz-transform 0.4s ease-out;      
    
17.     }   
    
18.   
    
19.       
    
20.     .avatar:hover{/*设置鼠标悬浮在头像时的CSS样式*/      
    
21.     box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px   
    
22.   
    
23. rgba(255,255,255,1);      
    
24.     -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);      
    
25.       
    
26.   
    
27. transform: rotateZ(360deg);/*图像旋转360度*/      
    
28.     -webkit-transform: rotateZ(360deg);      
    
29.     -moz-transform: rotateZ(360deg); }

مەزمۇننى كۆچۈرۈۋېلىش

شەھلا

بۇنداق قىلساق نىمىگە پايدىسى بار؟