[Web-development (jquery)] CSS3 Techniques

CSS3 Techniques

<style type="text/css"> body { background-color: #D6E4FF; } .shadow1 { background-color: #eee; padding: 10px; padding-left: 18px; padding-right: 18px; box-shadow: 0px 2px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.7); -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.7); color: black; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; } .shadow2 { background-color: #333; padding: 10px; padding-left: 18px; padding-right: 18px; box-shadow: 0px 2px 6px rgba(255,255,153,0.7); -webkit-box-shadow: 0px 2px 6px rgba(255,255,153,0.7); -moz-box-shadow: 0px 2px 6px rgba(255,255,153,0.7); color: white; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; } .round1 { background-color: #f99; border: solid 1px black; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; padding: 10px; padding-left: 18px; padding-right: 18px; color: black; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; } .round2 { background-color: #333; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-top-left-radius: 59px 20px; -webkit-border-bottom-left-radius: 59px 20px; -moz-border-radius-topleft: 59px 20px; -moz-border-radius-bottomleft: 59px 20px; padding: 10px; padding-left: 18px; padding-right: 18px; color: white; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; } .round3 { border: dashed 2px #093; -webkit-border-top-left-radius: 17px; -moz-border-radius-topleft: 17px; -webkit-border-bottom-right-radius: 17px; -moz-border-radius-bottomright: 17px; background-color: #ff9; padding: 10px; padding-left: 18px; padding-right: 18px; color: black; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; } .css5box2 { <!-- Baseline --> background-color: #fed; border-top: solid 1px white; border-bottom: solid 1px #669; padding: 10px; padding-left: 18px; padding-right: 18px; color: black; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; margin-bottom: 10px; border-radius: 8px; <!-- border radius --> -webkit-border-radius: 8px; -moz-border-radius: 8px; <!-- shadows --> -moz-border-radius: 8px; box-shadow: 0px 1px 3px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); <!-- gradient --> background: -webkit-gradient( linear, center top, center bottom, color-stop(0%, #fffffa), color-stop(30%, #fed), color-stop(80%, #fed), color-stop(100%, #fffffa) ); background: -moz-linear-gradient( top, #eef, #cce 30%, #cce 80%, #eef 100% ); width:350px; } .gradback { background-color: #eee; background: -webkit-gradient( linear, center top, center bottom, color-stop(0%, #eef), color-stop(30%, #cce), color-stop(80%, #cce), color-stop(100%, #eef) ); background: -moz-linear-gradient( top, #eef, #cce 30%, #cce 80%, #eef 100% ); border-top: solid 1px white; border-bottom: solid 1px #669; padding: 10px; padding-left: 18px; padding-right: 18px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; box-shadow: 0px 1px 3px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); color: black; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; } .css5box2 h3 { text-shadow: 0px 3px 3px rgba(0,0,0,0.2); color: #339; } input.styled { background-color: #eee; background: -webkit-gradient( linear, center top, center bottom, color-stop(0%, #eee), color-stop(100%, #fff) ); background: -moz-linear-gradient( top, #eee, #fff ); border: solid 2px white; padding: 3px; padding-left: 7px; padding-right: 7px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; box-shadow: 0px 1px 3px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); color: black; text-shadow: 0px 1px 1px white; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; } input.styled:focus { box-shadow: 0px 1px 6px rgba(0,64,255,0.7); -webkit-box-shadow: 0px 1px 6px rgba(0,64,255,0.7); -moz-box-shadow: 0px 1px 6px rgba(0,64,255,0.7); outline: none; -webkit-focus-ring-color: none; } input.roundbutton { background-color: #eee; background: -webkit-gradient( linear, center top, center bottom, color-stop(0%, #eee), color-stop(100%, #ccc) ); background: -moz-linear-gradient( top, #eee, #ccc ); border: solid 2px white; padding: 10px; padding-left: 18px; padding-right: 18px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; cursor: pointer; box-shadow: 0px 1px 3px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7); color: black; text-shadow: 0px 1px 1px white; font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif; font-size: 10pt; } input.roundbutton:active { border-width: 1px; margin-left: 1px; margin-right: 1px; -box-shadow: 0px 1px 1px rgba(0,0,0,0.8); -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.8); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.8); background: -webkit-gradient( linear, center top, center bottom, color-stop(100%, #eee), color-stop(0%, #ccc) ); background: -moz-linear-gradient( top, #ccc, #eee ); } </style> <p><b>Shadows</b></p> <p> <span>Shadow</span> <span>Glow</span></p> <p><b>Borders with Rounded Corners</b></p> <p> <span>Round Corners</span> <span>Round Corners</span> <span>Round Corners</span></p> <p><b>How to Style Boxes</b></p> <div> <h3>Lorem Ipsum Dolor</h3> <p>Lorem ipsum dolor sit amet, vurucelerisque tincidunt ac vel elit.</p> </div> <div> <input type="text" value="I am a text field" size="43" /> </div> <p><b>Styling Forms</b></p> <div> <input type="button" value="Click Me" /> </div> 

Posted by Jhoe XD