How to Create Mobile Screen using CSS and HTML ONLY ( do not use any images). Make it cross browser compatible.
Index.html
| <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" type="text/css" media="screen"> </head> <body> <div class="module"> <div class="container"> <div class="bubble"> Hello How r u ? </div> <div class="bubble bubble--alt"> I am very well u say </div> <div class="bubble"> I am also good? </div> <div class="bubble bubble--alt"> what r u doing? </div> <div class="bubble"> working some important work . </div> <div class="bubble bubble--alt"> Great :) </div> </div> <div class="Home-Button"> <img src="logo.png"/> </div> </div> </body> </html> |
.container { padding:10px 10px; margin: 0 auto; width: 220px; } /* .bubble */ .bubble { background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, rgb(210,244,254)),color-stop(1, rgb(149,194,253))); border: solid 1px rgba(0, 0, 0, 0.5); border-radius: 20px; box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2); box-sizing: border-box; clear: both; float: left; right: 46px; margin-bottom: 20px; padding: 8px 10px; position: relative; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); width: auto; max-width: 100%; word-wrap: break-word; } .bubble:before, .bubble:after { border-radius: 20px / 10px; content: ''; display: block; position: absolute; } .bubble:before { border: 10px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.5); bottom: 0; left: -7px; z-index: -2; } .bubble:after { border: 8px solid transparent; border-bottom-color: #d2f4fe; bottom: 1px; left: -5px; } .bubble--alt { background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.25, rgb(172,228,75)),color-stop(1, rgb(122,205,71))); float: right; left: 4px; } .bubble--alt:before { border-bottom-color: rgba(0, 0, 0, 0.5); border-radius: 20px / 10px; left: auto; right: -7px; } .bubble--alt:after { border-bottom-color: #ace44b; border-radius: 20px / 10px; left: auto; right: -5px; } .module{ border: 5px solid #151618; border-top-width:60px; border-bottom-width:60px; padding: 10px 40px; background: #dbe1ed; width: 198px; height:359px; border-radius: 25px; } .Home-Button img{ width:60px; height:50px; margin-left: 62px; margin-top: 67px; } .top-head img{ width:40px; height:13px; } |
No comments:
Post a Comment