@media at-rules, used to target styles at specific media, such as screen or print.A page can then be optimized and laid out completely differently for mobile phones, tablets, and varying browser window sizes. Browser-size specific CSS CSSCopy This is telling a browser to apply a block of CSS when its viewport is 1000 pixels wide or less. You could use this to do something […]
In this tutorial we will show you how to create animated skill bar using jQuery, HTML and CSS.You may also like animated progress bar using jquery. You may also like How to Animated progress bar using jquery, html and css and How to Create File Upload Progress Bar Using jQuery and PHP. HTML Code CSS Code jQuery Code
The z-index property specifies the stack order of an element. z-index is a css property that allows to position an object/element in front/behind of other elements. Important notes that you will need to understand about z-index properties. many time developer face issue z-index not working Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). the z-index element […]
Learn how to create a responsive cutout text with CSS. cutout text is also known as knockout. Here is a quick example of how you can produce Cutout Effect in CSS. <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <style> body {font-family: Arial, Helvetica, sans-serif;} .image-container { background-image: url(“https://cn.opendesktop.org/img/4/2/6/e/641fe0ec80ce64b1f4f4f2cebd3a79fd4dee.jpg”); background-size: cover; position: relative; height: 300px; […]
CSS can control the appearance of a cursor. The cursor property specifies the mouse cursor to be displayed when pointing over an element.The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers/operating systems in […]
We are going to create a simple page that lists three courses, and allows you to rate them. This means we need the stars to show the current rating, and to allow voting. We also want an area to show the total votes cast, and the current rating down to one decimal place. You may […]
In this post we will not discuss simple Comment system in which only single user can submit their comment. We all know comment or even we can also called review are best way to keep make connection between website content owner and reader of that content. HTML, CSS, Ajax and PHP Code PHP Code (post_comment.php)
<!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <style> body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } .bg-image { /* The image used */ background-image: url(“photographer.jpg”); /* Add the blur effect */ filter: blur(8px); -webkit-filter: blur(8px); /* Full height */ height: 100%; /* Center and scale […]
<!DOCTYPE html> <html> <head> <style> .blinking { background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) ); color:transparent; -webkit-background-clip: […]
Gone are the days of using Flash and GIF images for creating animated graphics. It is time to show off some of the best CSS3 capabilities. With CSS3 2D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a two-dimensional space. CSS3 2D transform gives you […]
