Designer's Solutions: April 2013

Monday 29 April 2013

Create outline effects in css

.outline {
width:500px;
height:300px;
background:#FFC;
overflow-y:hidden;
outline-offset: 12px;
outline-color:#F00;
outline-style:solid;
outline-width:2px;
border:#090 solid 3px;
margin:40px;
font-size:30px;
text-align:center;
}

like as:

How to Create Multiple Backgrounds in html with CSS3

.box{
width:600px;
height:400px;
background:url(theworld_256.png), url(t_5.jpg);
background-repeat:no-repeat;
background-position: center bottom, left top;
padding:10px;
text-align:center;
}

Like as :

How to create inner shadow in Html with css

.box{
width:300px;
height:300px;
background:#FF9;
padding:10px;
-moz-box-shadow: inset 0 0 15px 10px #888;
-webkit-box-shadow: inset 0 0 15px 10px#888;
box-shadow: inset 0 0 15px 10px #888;
text-align:center;
}
Like as :

Saturday 27 April 2013

How to Create Marquee Effects Without Marquee Tag in HTML5

Just copy and paste this...
Head section is :

<head>    <meta charset="utf-8" />    <script type="application/javascript">          var X = 800;           function mtxt() {             var canvas = document.getElementById("txt");             if (canvas.getContext) {                 var ctx = canvas.getContext("2d");                   // Set the banner text attributes                 ctx.fillStyle = "green";                 ctx.shadowOffsetX = 1;                 ctx.shadowOffsetY = 1;                 ctx.shadowBlur = 1;                 ctx.shadowColor = "red";                 ctx.font = "40px ariel";                   // Call the moveBanner() function repeatedly every 50 microseconds                 setInterval(function () { moveBanner() }, 50)             }         }           function moveBanner() {             var canvas = document.getElementById("txt");             if (canvas.getContext) {                 var ctx = canvas.getContext("2d");                   // Clear the screen                 ctx.clearRect(0, 0, 800, 100);                   // Display the text in the new position                 ctx.fillText("All Tutorial Zone", X, 50);                 X -= 3;                   // If the banner has reached the left end of the screen, resent the x-coordinate                 if (X < -230)                     X = 800             }         }     </script>    <title>Moving Banner</title></head>

Body section is :