Posts

Showing posts with the label CSS

Help Content for Registration form using CSS

Image
Here , I am describing a help content for a registration fields. Some Time we have to make a registration form, where we want to show some information about the Input fields. Here, I am making a tooltip using CSS and HTML. Company Name

What is CSS3?

A Program in Jquery for Excercise - Jquery

Image
A Program in Jquery for Pity - Jquery: Style to be Define (CSS): body { margin:0px; padding:0px;background:#cc0000; } .container { margin:0px auto; padding:10px; background:#0f0f0f; position:relative; min-height:100%; width:350px; text-align: center; } .container img { display:none; max-width:100%; } .container h3 { background: #cc0000; color: aqua; padding: 5px 5px; font-size: 35px; font-weight: normal; font-family: arial; } Script to be Define (.js file): /* A JQuery Program to run a Excercise */ function startpity() { $("#gamestatus").val('1'); } function stoppity() { $("#gamestatus").val('0'); } var runningtimer = 0; var starttimer = 0; var stoptimer = 0; function runthepity() { runningtimer++; var gamestatus = $("#gamestatus").val(); if( gamestatus ==1  ) { starttimer++; console.log('pity is run for '+starttim

Gallery Hover Effect via only CSS

Image
DEMO: For Making this Effect: We have to Defined only four class on CSS as following: .container  { float:left; margin: 10px; } .imgb {  display: none; position: absolute; } .container:hover .imgb {  display: block; } .clear {  clear:both;  } Description: container: We have take attribute of float to left, so that our gallery 's Images will be distributed as a uniform manner. imgb: This is the big image, which will be display on hover on the above div, So we have defined its attribute to display none, and the position is absolute. so that the image will not take space on pages. and will like a popup effect. .container:hover .imgb This property is the main point for this. The display of the class imgb is going to block after hovering on class  container. clear: This div is made for breaking the flow of content from left i.e.  float:left will be disable after this. Now we have to make HTML: { <div class="container"