Tag：css3
-
Time：2021-9-15
1、 Foreword When compiling the animation effect of the front-end page, the filter attribute will be used more or less. Due to its too many attribute values, this article is used to sort out and record its relevant data. 2、 Introduction The filter attribute defines the visual effect of the element (usually). The attribute values […]
-
Time：2021-9-11
Effect achieved: Implementation code html <div id=”pricing-table” class=”clear”> <div class=”plan”> <h3>Enterprise<span>$59</span></h3> <a class=”signup” href=””>Sign up</a> <ul> <li><b>10GB</b> Disk Space</li> <li><b>100GB</b> Monthly Bandwidth</li> <li><b>20</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> <div class=”plan” id=”most-popular”> <h3>Professional<span>$29</span></h3> <a class=”signup” href=””>Sign up</a> <ul> <li><b>5GB</b> Disk Space</li> <li><b>50GB</b> Monthly Bandwidth</li> <li><b>10</b> Email Accounts</li> <li><b>Unlimited</b> subdomains</li> </ul> </div> <div class=”plan”> <h3>Standard<span>$17</span></h3> <a […]
-
Time：2021-9-9
Realization effect Implementation code html <div class=”wrapper”> <div class=”sun”></div> <div class=”cloud”> <div class=”cloud1″> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class=”cloud1 c_shadow”> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class=”cloud_s”> <div class=”cloud1″> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class=”cloud1 c_shadow”> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class=”cloud_vs”> […]
-
Time：2021-9-6
Realization effect Implementation code html <h1 class=”text-light”>Pure CSS Animated Gradient Background</h1> <div class=”btn-group mt-2 mb-4″ role=”group” aria-label=”actionButtons”> <a href=”https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip” class=”d-block btn btn-outline-light” download><i class=”fas fa-file-download mr-2″></i>Download Source</a> <a href=”https://manuelpinto.in” target=”_blank” class=”d-block btn btn-outline-light”>Visit my Website<i class=”fas fa-external-link-square-alt ml-2″></i></a> </div> <h6 class=”text-light small font-weight-bold”><i class=”fas fa-code”></i> with <i class=”fas fa-heart”></i> by Manuel Pinto</h6> <script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js” integrity=”sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=” […]
-
Time：2021-9-4
Effect achieved: Implementation code: html <div class=”buttons”> <h1>Simple hover effects with <code>box-shadow</code></h1> <button class=”fill”>Fill In</button> <button class=”pulse”>Pulse</button> <button class=”close”>Close</button> <button class=”raise”>Raise</button> <button class=”up”>Fill Up</button> <button class=”slide”>Slide</button> <button class=”offset”>Offset</button> </div> CSS /* https://developer.mozilla.org/en/docs/Web/CSS/box-shadow box-shadow: [inset?] [top] [left] [blur] [size] [color]; Tips: – We’re setting all the blurs to 0 since we want a solid fill. – […]
-
Time：2021-9-1
Effect achieved: Implementation code: html <!– Please heart it if you like! –> <div id=’book’> <div id=’top’></div> <div id=’front’></div> <div id=’right’></div> <div id=’bottom’></div> <div id=’shadow’></div> <div id=’bookmark’> <div> <div> <div> <div></div> </div> </div> </div> </div> <div id=’bookmark-shadow’></div> </div> <div id=’flip’> <div id=’front’> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div></div> </div> </div> </div> […]
-
Time：2021-8-31
Effect achieved: Implementation code: html <link href=’https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700′ rel=’stylesheet’ type=’text/css’> <div align=”center” class=”fond”> <div style=”width:1000px;”> <div class=”style_prevu_kit” style=”background-color:#cb2025;”></div> <div class=”style_prevu_kit” style=”background-color:#f8b334;”></div> <div class=”style_prevu_kit” style=”background-color:#97bf0d;”></div> <div class=”style_prevu_kit” style=”background-color:#00a096;”></div> <div class=”style_prevu_kit” style=”background-color:#93a6a8;”></div> <div style=” padding:5px; color:#b5e6e3; font-weight:300; font-size:30px; font-family:’Roboto’;padding-top:20px;”>jb <font style=”font-weight:400;”>51</font></div> <a href=”http://www.wifeo.com/code” style=”text-decoration:none;” target=”_blank”><div style=” color:#b5e6e3; font-weight:300; font-size:20px; font-family:’Roboto’;”>developpaer</div></a> </div> </div> css3 .fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0; background-color:#00506b;} .style_prevu_kit { […]
-
Time：2021-8-30
CSS3 can change the color of the picture. Since then, there is no need to design multiple drawings, and they can be modified at any time. Here is a brief introduction to how to change the color effect of the background picture in CSS3. Mode 1: using drop shadow in CSS3 filter The code is […]
-
Time：2021-8-27
Effect achieved: Implementation code html <ul class=”slides”> <input type=”radio” name=”radio-btn” id=”img-1″ checked /> <li class=”slide-container”> <div class=”slide”> <img src=”http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg” /> </div> <div class=”nav”> <label for=”img-6″ class=”prev”>‹</label> <label for=”img-2″ class=”next”>›</label> </div> </li> <input type=”radio” name=”radio-btn” id=”img-2″ /> <li class=”slide-container”> <div class=”slide”> <img src=”http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg” /> </div> <div class=”nav”> <label for=”img-1″ class=”prev”>‹</label> <label for=”img-3″ class=”next”>›</label> </div> </li> <input […]
-
Time：2021-8-26
I encountered a problem on the landing page of the last blog. I suddenly want to use the effect of transparent background pictures and opaque content. Here I will talk about my two ideas. Effect display: Content translucent Opaque content The most common way is to set the opacity of elements. The effect of […]
-
Time：2021-8-25
I introduced one to you a few days agoDomestic XHTML editorToday, tinyeditor is a well-known foreign web design blogleigeber.comJust released a concise and easy-to-use HTML WYSIWYG editor. Tinyeditor has the following features It is written in JavaScript and does not depend on other class libraries This is a lightweight editor. The file to be called […]
-
Time：2021-8-25
Effect achieved: Implementation code html <nav class=”dropdownmenu”> <ul> <li><a href=”http://www.jochaho.com/wordpress/”>developpaer</a></li> <li><a href=”http://www.jochaho.com/wordpress/about-pritesh-badge/”>jb51</a></li> <li><a href=”#”>Articles on HTML5 & CSS3</a> <ul id=”submenu”> <li><a href=”http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/”>Difference between SVG vs. Canvas</a></li> <li><a href=”http://www.jochaho.com/wordpress/new-features-in-html5/”>New features in HTML5</a></li> <li><a href=”http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/”>Creating links to sections within a webpage</a></li> </ul> </li> <li><a href=”http://www.jochaho.com/wordpress/category/news/”>News</a></li> <li><a href=”http://www.jochaho.com/wordpress/about-pritesh-badge/”>Contact Us</a></li> </ul> </nav> CSS3 .dropdownmenu ul, .dropdownmenu li { margin: […]
