1stwebdesigner |
40 Superb T Shirt Designs Which Will Make You Look Twice Posted: 08 Mar 2010 12:00 PM PST Want to stand out? Buy a unique T-shirt! In this article you are going to find a lot of cool and creative t shirt designs from talanted artists.You can actually purchase almost all of them. Also it is interesting to look at them from proffesional point of view. Try to analyze and understand why and how interesting effects are achieved, how 3D effects are put effectively in use. I would love to have all of these T-shirts! How about you, what's your favorite? 1. Downtown by 7sixes
4.Lions Are Smarter Than I Am by Keith Carter
5. Hearts with wings by lookinducky
35. Funkmaster by short36. Townshipfunk by Peachbeach37. Vutterfly Leaf by Cib38. Quality by Lars Wunderlich39. Coloures by song40. Breaking Down Barriers by gaunty |
How to Create a Nifty Dynamic Shadow with jQuery Posted: 08 Mar 2010 01:00 AM PST First I want to welcome you to my very first article for 1stwebdesigner. Today I’ll show you how to create a very nifty looking dynamic shadow with a few teaspoons of jQuery, a pinch of CSS and some transparent PNG's as Base. I’ll explain every line of used code, so you can easily follow along and create your own awesome looking dynamic shadow powered by jQuery. IntroductionWhen I first published my jQuery shadow experiment, I got a huge response from the community and a lot of people asked me, how I achieved this effect and if I'm going to write a tutorial for it – So here it is now! If you want to follow along with the source files, you can download them by clicking here (*.zip archive). You can also take a look at the final demo here. Step 1: Creating the transparent PNG'sFirst we need to prepare all PNG files we’re going to use. We’ll need following image elements:
We’re going to use the CSS sprite technique for reducing HTTP requests. So we’ll need 3 images (otherwise we would need 6 separate images and twice as much HTTP requests). 1st PNG Image: The Light-Switch Sprite 2nd PNG Image: The Light-Bulb Sprite 3rd PNG Image: The Logo Sprite I'm not going to explain how to create those images, as I’ll concentrate on the source code. If you want to use your own images, just make sure to save your images as PNG 24 , so your transparency gets saved too. Step 2: Preparing our HTML, CSS & JS filesTo make your files well-arranged, we’re going to create following folder structure for our files now: The root folder (dynamicShadow) will contain our index.html with all layout containers inside of it. Inside of the img folder, you should put all three PNG image files you created or copied from step 1 above. Inside the css folder create a file named style.css. There we’ll style all layout elements we used in the html file. And the magic will happen inside of the js folder. There we’ll create a file named script.js. It will contain our jQuery JavaScript code. If you have done those two steps above, we are now ready to go on and finally let the magic happen! Step 3: Writing the HTML file with all containers we will useFirst we need to include the files we created in the previous step, into the header part of our HTML. First our stylesheet file: <link type="text/css" rel="stylesheet" href="css/style.css" media="all" /> Now we’ll attach the latest version of jQuery itself and jQuery UI from Google's AJAX Libraries repository: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> Last but not least we need to attach our JavaScript file (script.js): <script type="text/javascript" src="js/script.js"></script> Our header should look something like this now: <head> <link type="text/css" rel="stylesheet" href="css/style.css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> We can start with the body part of our HTML now: We’re going to need following div's with the same id's for the next step, where we are going to style our containers. <body> <div id="switch"></div> <div id="light-bulb" class="off"><div id="light-bulb2"></div></div> <div id="logo"></div> <div id="logosh"></div> <div id="infobox"><p>Please activate JavaScript!</p></div> </body> For explanation:
Step 4: Let's get some colors into our HTML file!Now we’re ready to style our HTML with the CSS file we included into our header. We will start with the info box. If you have chosen to include it, here is a styling suggestion: body { background:#3B4D61 url(../img/bg.jpg) repeat 0 0; } #infobox { position:absolute; width:300px; bottom:20px; left:50%; margin-left:-150px; padding:0 20px; background:rgba(0,0,0,0.5); -moz-border-radius:15px; -webkit-border-radius:15px; z-index:999; } #infobox p { display:block; color:#D1D8DF; font:bold 15px/10px Tahoma, Helvetica, Arial, Sans-Serif; text-align:center; } For body, an image is used to enhance the effect of shadow.For the #infobox we are using some CSS3 to make it prettier. The background is black and 50% transparent with the awesome rgba attribute and the corners are rounded with a 15px wide diameter through the Mozilla and WebKit specific attributes. The box will be 340 pixels wide (300 + 2 x 20) and placed centered on the bottom of our page. With the z-index set to 999 it will be the topmost element in our page so it does not get covered from our logo, the shadow or the light bulb. Next is our switch: #switch { position:absolute; bottom:50px; left:50px; width:80px; height:120px; background:url(../img/light-switch.png) -80px 0 no-repeat; cursor:pointer; z-index:100; } It will be absolute positioned to the bottom left corner of our page. The backgrounds X position is set to –80px. There we are using the CSS sprite technique the first time. The cursor is going to be a pointer, so the user knows that he can click it. z-index to 100. The logo, the shadow and the light bulb must get a higher z-index, so they don't disappear behind the switch. Now let’s style our two light bulb containers: #light-bulb { position:absolute; top:20%; left:70%; width:150px; height:150px; background:url(../img/lightbulb.png) -150px 0 no-repeat; cursor:move; z-index:800; } #light-bulb2 { width:150px; height:150px; display:none; background:url(../img/lightbulb.png) 0 0 no-repeat; } The backgrounds X position of the main light bulb container is set to –150px. This is the "turned off" state of our sprite-image. The "inner light bulb" (light-bulb2) is set to “top left” (0 0), so it is the "turned on" state of the sprite. Later we will animate the opacity of it from 0% to 100% and create a smooth blend effect from the on to the off state and reverse. z-index to 800: It will be above the switch, above the logo and above the shadow but behind the info box. The cursor attribute is set to "move". This way the user will get a nice, OS-based cursor which tells him he can move this object around. Our last two containers are the logo with his shadow: #logo { position:absolute; top:40%; left:20%; width:450px; height:150px; background:url(../img/logo.png) 0 0 no-repeat; cursor:move; z-index:700; } #logosh { position:absolute; width:450px; height:150px; display:none; background:url(../img/logo.png) 0 -150px no-repeat; z-index:600; } The main logo containers gets also the "move" cursor and the background position is set to “top left” again. This will show the main part of our logo sprite. z-index to 700. It’ll be above the shadow and above the switch, but behind the light bulb and the info box. The shadow container gets z-index of 600 and the backgrounds Y position is set to –150px. It's the shadow part of our logo sprite-image. If you came this wide, your index.html file should look something like this in your browser (of course only, if you used the same image files of this tutorial): Now let's get this party started and add some spice to our page. We will write some JavaScript now! Step 5: The magic starts to happen now!Ok now let’s go with the interesting part of this whole tutorial. First we start with the jQuery's main function: $(function(){ }); This is the short hand code for jQuery's document.ready(). Our whole script needs to be inside of this function, so it gets loaded, as soon as the DOM is ready. Next we’ll define some variables and set the default text of our info box. The descriptions are inline as comments: // shadow offset var shadowOffset = 1.08; // the light switch var lightswitch = $("#switch"); // outer light bulb var lightbulb = $("#light-bulb"); // inner light bulb var lightbulb2 = $("#light-bulb2"); // center of light - X-axis var lightCenterX = parseInt(lightbulb.width()/2); // center of light - Y-axis var lightCenterY = parseInt(lightbulb.height()/2); // logo container var logo = $("#logo"); // light and logo containers var lightAlogo = $("#light-bulb, #logo"); // center of logo - X-axis var logoCenterX = parseInt(logo.width()/2); // center of logo - Y-axis var logoCenterY = parseInt(logo.height()/2); // shadow container var logoshadow = $("#logosh"); // center of shadow - X-axis var logoShdwCenterX = parseInt(logoshadow.width()/2); // center of shadow - Y-axis var logoShdwCenterY = parseInt(logoshadow.height()/2); // info-box text container var statustext = $("#infobox p"); // info-box default text var defaulttxt = "Drag the light-bulb or the logo!"; // info-box text for hovering switch while state is "off" var ontxt = "Let there be light!"; // info-box text for hovering switch while state is "on" var offtxt = "Switch off the light!"; // set info-box text to default text statustext.text(defaulttxt); // start our main function (will be used later) moveShadow(); For now, you can comment the last line out. moveShadow(); will be our main function which will change the position of the shadow. Now let's get dynamic and let us make the light bulb and the logo draggable. We’re going to use jQuery UI's draggable interaction element to keep things easy. // making the light and the logo draggable lightAlogo.draggable({ drag: function(event, ui){ // change the statustext to "dragging + element id" state statustext.text("dragging " + $(this).attr("id")); // our main function which will move the shadow moveShadow(); }, stop: function(event, ui){ // switching to default text when stopped dragging statustext.text(defaulttxt); } }); While dragging, we’re going to set the status text of our info box to "dragging" + the id of the current element. So in our case it will be logo or light-bulb. When we release the mouse and stop dragging the current object, we revert the text to our default value. Our two objects should now be draggable! Isn't it easy with jQuery UI? :) Again you can comment out the moveShadow(); function for now, if you want to try your code in the browser. This will be the main function which makes the dynamic shadow moving, while you drag either the light bulb or the logo. With the following function, we’re going to change the default text of the info box to our on or off text when hovering: // changing the info text when hovering the switch lightswitch.hover(function(){ if(lightbulb.hasClass("off")){ // when lightbulb has the class "off" show this text statustext.text(ontxt); }else{ // otherwise show this text statustext.text(offtxt); } },function(){ // hovering out will show the default text again statustext.text(defaulttxt); }); If the light bulb has the class "off", then show the "on text", else show the "off text". When hovering out, the default text will be shown again. Still easy, right? Next is our function for calculating the opacity of our logo shadow, according to the distance of the light source. In our case the light bulb: // calculating the shadow opacity according to the light bulb distance function setOpacity(getDistance){ if(lightbulb.hasClass("off")){ // if the lightbulb has the class "off", opacity = 0 (no shadow) return 0; }else{ // otherwise we calculate a suitable shadow opacity with this formula return (1.2 - getDistance /1000); } } If our light bulb has the class "off", we’ll return “0″, which stands for zero opacity. No light, no shadow. Sounds logical, right? More interesting is the “else” part, where we’re going to use this formula "1.2 – getDistance / 1000" to calculate a shadow which will look quite good. getDistance /1000 will just move the decimal point 3 points to the left, giving us a usable number for the next calculation, where we are going to subtract it from 1.2 (which would be 120% theoretically).You can experiment with this value, if you are not satisfied with the results. The next what we are going to do is to assign the things which should happen, when the user clicks on our light switch: // assign the things, which should happen, when clicking the light switch lightswitch.click(function(){ // when the light bulb has the class "off" do following: if(lightbulb.hasClass("off")){ // first remove the class "off" lightbulb.removeClass("off"); // change the background position of the CSS sprite lightswitch.css("backgroundPosition","0 0"); // showing the shadow of the logo with a fading animation logoshadow.stop().fadeTo(750,setOpacity(shadowDistance)); // fade in the inner light bulb container (light is turned on!) lightbulb2.stop().fadeTo(750,1); // changing the status text to the "off text" statustext.text(offtxt); // else do following: }else{ // adding the class "off" lightbulb.addClass("off"); // move the background position of the switch back to original position lightswitch.css("backgroundPosition","-80px 0"); // fade out the logo shadow logoshadow.stop().fadeTo(750,0); // fade out the turned on light (no more lights now) lightbulb2.stop().fadeTo(750,0); // changing the status text to the "on text" statustext.text(ontxt); } }); A few things are happening now. Let's get through it line by line. First we need to differentiate if the lights should be turned on or off. For this we will check once again if the light bulb has the class "off" or not. If it has it, we’ll do following:
If the light bulb has not a class named "off", we will do the opposite of above which is following:
The last function we need is finally the one, which will move our shadow (and probably the most interesting one): // the main function - our shadow mover function moveShadow(){ // save the current X position of the light bulb lightX = parseInt(lightbulb.offset().left) + lightCenterX; // save the current Y position of the light bulb lightY = parseInt(lightbulb.offset().top) + lightCenterY; // save the current X position of the logo logoX = parseInt(logo.offset().left) + logoCenterX; // save the current Y position of the logo logoY = parseInt(logo.offset().top) + logoCenterY; // save the value how far the logo is away from the light bulb on the X-axis distanceX = logoX - lightX; // save the value how far the logo is away from the light bulb on the Y-axis distanceY = logoY - lightY; // calculating and saving the value of the square root of those two distance values distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)); // calculating and saving the shadow distance with the offset we defined in our variables shadowDistance = distance * shadowOffset; // preparing the CSS value to put into the "left" attribute of the shadow container shadowPosLeft = (distanceX / distance * shadowDistance + lightX - logoShdwCenterX) + "px"; // preparing the CSS value to put into the "top" attribute of the shadow container shadowPosTop = (distanceY / distance * shadowDistance + lightY - logoShdwCenterY) + "px"; // finaly using the results of all above calculations to position our shadow and set the opacity logoshadow.css({ "left": shadowPosLeft, "top": shadowPosTop, "opacity": setOpacity(shadowDistance) }); } This may looks a little bit weird and strange to you on the first sight, but it's really not so difficult to understand and I used only some basic math formula for the calculations which I will describe you now. Let's get through it, line by line again:
That's it!The last thing you need to do is to uncomment the moveShadow(); function twice (only if you have commented it out). At first at the variables section and at last in the jQuery UI's draggable function. Your shadow is now dynamic positioned and also has a cool looking dynamic opacity, depending on the distance and position of both: The light bulb and the logo. I hope you liked this tutorial and could follow it step by step. If you’ve done everything correctly, you should have ended up with something like this: DEMO. If you had some troubles with any step or need further instructions or help, feel free to write your question into the comments section of this post so I can take a look at your question and help you out! Thanks for reading and have fun trying and using it in your next project! |
You are subscribed to email updates from Graphic and Web Design Blog -Resources And Tutorials To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
Comments (0)
Post a Comment