Search the Community
Showing results for tags 'CSS3'.
-
Started on the 2D tutorial and could not get animation to work - IS this explained further along in the animation section of CSS3? Or, is animation in JavaScript? I was hoping it wasn't a computer setting problem because when I was in the CSS3 2D transformation tutorial, the animation was not working. Thanks Rich
-
Hello, I want ask about css3 animation in exercise 6 in css3 animation using (animation-delay: ease-in-out;) in answer exercise why not use animation-timing-function? Thanks,
-
Hello everyone! My name is Ron Kane and I am an accomplished web developer and technical writer having done many technical manuals, general information and "how-to"s in the Content Management field. I have significant success in utilizing the Adobe Suite and Microsoft SharePoint products with respect to creating content and following industry based style guides. My biggest success to date was working with one of my past company's Chief of Staff for a SVP in revamping their entire Intranet portal. This portal went from being unprofessional looking and having no web traffic to being very professional looking and increasing the traffic to it ten-fold. Right now, I'm reading through the HTML tutorials in preparation for my first ever HTML certification through here to gain recognition for my commitment to improving my skills and to meet with fellow web developers on here. Ask away if you have quesitons and I'm glad to be on here! Ron
-
Hey everyone,Trying to make a website for learning purposes and I am totally lost. I'm teaching myself CSS3.0 and HTML 5.0 having learnt CSS2 and HMTL4 many years ago. None and no CSS I write is ever applied to the HTML5 webpage despite being referenced and both the HTML and CSS files being in the same folder together. And yes, I've Googled a lot and looked up my old textbooks and am still super stuck...see attached or look below for the code:PS: Using Microsoft Expression Web 4 (trial) OxfordEngineering.html<!DOCTYPE html><html><meta charset="UTF-8"><title></title><head><link rel="stylesheet" type="text/css" href="Oxford_engineering_CSS.css"></head><body>This is my website!</body></html>Oxford_engineering_CSS.css<div id="slider">div#slider { width: 80%; max-width: 3000px; }<figure><img src="Images/Edited/Engineer1.jpg" alt="Engineer1"><img src="Images/Edited/Engineer2.jpg" alt="Engineer2"><img src="Images/Edited/Engineer3.jpg" alt="Engineer3"><img src="Images/Edited/Engineer4.jpg" alt="Engineer4"></figure>div#slider figure {position: relative; width: 500%;margin: 0; padding: 0; font-size: 0; text-align: left;}figure#imagestrip img {width: 25%; height: auto; float: left;}div#slider {width: 80%; max-width: 3000px; overflow: hidden}</div>body {background-color: #b0c4de;}
-
I want to create a dynamic header like the image attached... By dynamic i mean the borders should adjust according to the length of the text Help Appreciated
-
http://jsfiddle.net/makzan/RE2JJ/ The coding in the above link has fixed height and width (180 X 180 i.e Square)...I have images which are not square...they are either landscape or portrait....i tried to make width and height dynamic so that it could fit any size of image but i couldn't do it....Can anyone help me out,... Please.. Help Appreciated
-
Is there any way that we can validate our form fields with CSS3. I know that with HTML5 we can.
-
Ok, so i could not find this anyways, i don't know maybe i did not loot hard enought but seems faster to just ask here instead since i think this one u all might know except me hehe . I'm trying to expand my knowledge inside CSS Mobile websites, but not only mobile also bigger screens like TV for screens (like mine etc) and so on. I was thinking, does it really "NEED" to be specific numbers before the mobile or screen reacts to the browser? Example: We know that ipads (portrait) uses 768px as a minimum and maximum as 1024px... this is what i have so far: @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { #wrapper { margin: 0 auto; min-width: 768px; max-width: 1024px; background-color: #485778; } } And i'm very surten that i got this one right (tell me if i'm wrong)... however, what if i were to build my "own" design? A screen that has something that is between that number or just 1px "above" the 1024px.. do i just add in another pixel like this 1025px and then it will react as normal? My bottom line question is this, does the media query only react on specific numbers related to devices OR is it also possible to related this to custom build devices and screens? Hope someone can answer as always, thanks!
-
I find this tutorials very useful and I think it will be really handy if you do Bootstrap tutorial. On site getbootstrap.com is nice documentation, but some things aren't explained so well.Who think this is good idea? Thanks.
-
Hi, First, i need to tell you that i am not experienced in CSS or coding myself but i have fairly good overall technical knowledge. I'm in need of a very simple full screen slideshow consisting of 4 images. I found a CSS3/javascript for this here: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ I've tried to tweak it a bit to suite my needs. However, its not really optimal. I would like to change it so it doesnt fade between the images, a fast cut would be better. Also the original was for 6 images but i tried to change it to a 4 image slideshow but im not sure i did it correctly. Can someone help me with these two issues? thanks guys! the HTML looks like this: <!DOCTYPE html><!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--><!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]--><!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]--><!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]--><!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Claires slideshow Screen 1</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" /> <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style1.css" /> <script type="text/javascript" src="js/modernizr.custom.86080.js"></script> </head> <body id="page"> <ul class="cb-slideshow"> <li><span>Image 01</span><div></div></li> <li><span>Image 02</span><div></div></li> <li><span>Image 03</span></div></li> <li><span>Image 04</span><div></div></li> </ul> </body></html> and the CSS looks like this: .cb-slideshow,.cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; }.cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 72s linear infinite 0s; -moz-animation: imageAnimation 72s linear infinite 0s; -o-animation: imageAnimation 72s linear infinite 0s; -ms-animation: imageAnimation 72s linear infinite 0s; animation: imageAnimation 72s linear infinite 0s; }.cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }.cb-slideshow li:nth-child(2) span { background-image: url(../images/2.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; }.cb-slideshow li:nth-child(3) span { background-image: url(../images/3.jpg); -webkit-animation-delay: 36s; -moz-animation-delay: 36s; -o-animation-delay: 36s; -ms-animation-delay: 36s; animation-delay: 36s; }.cb-slideshow li:nth-child(4) span { background-image: url(../images/4.jpg); -webkit-animation-delay: 54s; -moz-animation-delay: 54s; -o-animation-delay: 54s; -ms-animation-delay: 54s; animation-delay: 54s; }/* Animation for the slideshow images */@-webkit-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-moz-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-o-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@-ms-keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }}@keyframes imageAnimation { 0% { opacity: 0 } 1% { opacity: 1 } 2% { opacity: 1 } 25% { opacity: 1 } 26% { opacity: 0 } 27% { opacity: 0 } 100% { opacity: 0 }} /Joel
-
On my blog there is a carousel slider like below image:- It was not working so I tried to use the console feature of chrome and a caught a problem,it was in this following form:- <script> (function($) { $(document).ready(function(){ $("#carousel .content").jCarouselLite({ Uncaught typerror: Undefined is not a function auto:0, scroll: 1, speed: 400, visible: 5, start: 0, circular: false, btnPrev: "#previous_button", btnNext: "#next_button" }); })})(jQuery) </script> It's id is " technopcarea.blogspot.com/:1018" Now what should I do,I rechecked the script,its correct.
-
I am designing a website which is responsive with css3 media queries. As we know that css3 is not supported in ie8 or less. So what should be the strategy for me to handle the website in ie8 or less. Thanks
-
I've just been playing with CSS media queries and transitions, to apply different layouts to different screen sizes, and I came across an unexpected effect when testing in Internet Explorer 11 and Google Chrome. Firefox doesn't seem to be affected, and reacts in the way I would expect. In this example there are three div elements, one of which is a container. Here is the HTML. <div id="container"> <div id="heading">HEADING</div> <div id="links"> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> <li>Link 5</li> </ul> </div></div> I applied a CSS transition that would resize the height of both div elements, as well as the font within them; all in just 0.5s. Here's the CSS. /* Below is the default styles */html, body, div, img, p, span, header, nav, ul { margin: 0 auto; border: 0; padding: 0; font-size: 1em; position: relative; -webkit-transition: height 0.5s ease, font 0.5s ease; transition: height 0.5s ease, font 0.5s ease; } ul { list-style-type: none; }li { display: inline; }#container { } #heading { width: 100%; height: 200px; background-color: red; font-family: "segoe ui light"; font-size: 50px; color: white; }#links { width: 100%; height: 50px; background-color: blue; font-family: "segoe ui light"; font-size: 30px; color: white; }/* Below is the styles applied to medium sized displays (tablets etc.) */@media screen and (min-width: 701px) and (max-width: 900px) { #heading { height: 100px; font-size: 40px; }#links { height: 40px; font-size: 20px;} }/* Below is the styles applied to small displays (mobile phones etc.) */@media screen and (max-width: 700px) {#heading { height: 50px; font-size: 30px; } #links { height: 30px; font-size: 15px; }} The height of both div elements are applied simultaneously, with the transition completing in 0.5s. However, the amendment to the size of the font doesn't apply simultaneously and, in fact, were amended almost as if they were triggered separately at different times. That is, the first div was affected by the change, which took 0.5s. Then, the second div was affected by the change, which took an additional 0.5s. So, the font transition took a total of 1s to complete. But, by definition, I would have expected the transition to be applied to both div elements at the same time and to complete within 0.5s just like the height. Is anyone aware of any reason why the font transition may be interpreted differently to the height transition?
-
Just see and enjoy it. http://jsfiddle.net/composite/6zr2q/embedded/result/ HOW TO: just click anywhere to show or hide and enjoy aero effects. BROWSERS: Firefox (All versions exclude blur effects but looks good like windows 8.) Chrome 19 and above. Safari 6 and above (sorry windows safari users.). Opera 15 and above (Only affect by webkit). Sorry for IE users. IE All version include 11. I'm finding figure out for IE looks like Firefox. TECH: Effects by CSS3 Only. Javascript is just for toggle class. that's all. transition used for show and hide animation. transform used for show and hide effect. filter:blur used for blurred window effect.
-
I am having trouble keeping my content within the divs or sorted in column. They seem to be ever expanding. I have tried have 3 divs with each set 400px each set to float within a 1200px container. and thought this would contain them but they appear in one line. Also tried using the css3 columns but that is also doing the same thing. I have no idea where i went wrong? This is the HTML <!DOCTYPE html><head><html><title>Untitled Document</title><link href="mainstylesheet.css" rel="stylesheet" type="text/css" /><link href="textcss.css" rel="stylesheet" type="text/css"><link href="infotray.css" rel="stylesheet" type="text/css"><meta charset="utf-8"></head><body><div class="wrapper"><div class="header"><div class="headeropacity"></div><div id="navbar"><ul id="nav"><li><a href="#DKSND.asp">HOME</a></li><li><a href="#news.asp">NEWS</a></li><li><a href="#about.asp">COURSES</a></li><li><a href="#about.asp">ABOUT US</a></li><div id="pointer"></div></ul> </div></div><div class="content1"> <h2>Heading</h2> <p>wjkdnsidn </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></div><div class="content2"> <h2>Heading</h2><div class="rollinfotray"><div class="infobox1"></div><div class="infobox2"> </div><div class="infobox3"></div><div class="infobox1"></div></div></div><div class="content3"><div class="contentcontainer"><div class="left"> <h2>Heading</h2> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></div><div class="middle"> <h2>Heading</h2> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div><div class="right"> <h2>Heading</h2> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div> </div></div><div class="footer"> <h2>Footerlinks</h2> <p> </p> <div class="contentcontainer"><p class="three-col">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p> </p> <p> </p> <p> </p> <p> </p> </div></div></div></body></html> And related CSS @charset "utf-8";@import url("navigationcss.css");html, body { margin: 0; padding: 0; white-space: nowrap;}.header,.content1,.content2,.content3,.footer{ float: left; width: 100%; text-align:center; line-height:130%; overflow:hidden; }.contentcontainer{ width: 1200px; margin-right: auto; margin-bottom: auto; }.left,.middle,.right{width:400px;float:left;}.wrapper { height: 100%; width: 100%;}.header { }.content1 {}.content2 { background-color: #222;}.content3 { background-color: #999; }.footer { background-color: #CCC;} @charset "utf-8";h2 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 20pt; color: navy; padding-top: 12px; padding-bottom: 3px; opacity:2;}.three-col { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px;}
-
Hello all, this is my first attempt at a real website to be posted in the future. It's at it's very basic stages. I've noticed a problem with the layout that needs fixing with Chrome, Firefox, and IE9. When the page is zoomed in or out, the layout shifts. How do I prevent this? HTML5 CODE: (Passes the W3C Validator) <!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="author" content="Joseph Maxwell Davies" /> <meta name="keywords" content="nomad, video, siblings, nomadic siblings, torah, teachings, articles" /> <title>Nomadic Siblings</title> <link type="text/css" rel="stylesheet" href="home.css" hreflang="en" media="screen" /> <script type="text/javascript" src="home.js"></script> </head><body> <div id="container"> <div id="webpagebanner"> <header> <hgroup> <h1>Nomadic Siblings</h1> </hgroup> </header> <div> </div> </div> <div id="leftsidebar"> <section id="logo"> <div> </div> </section> <nav id="leftsidebarnav"> <ul> <li>Home</li> <li>Videos</li> <li>Articles</li> <li>Contact Us</li> </ul> </nav> </div> <div id="maincontent"> <section> <div id="featuredcontent"> <figure> <!--<video height="320" width="480" controls="controls" poster=""> <source src="Wildlife.m4v" type="video/mp4" /> Your browser does not support HTML5 video please upgrade to one of the following: Chrome, Firefox, or IE9 </video>--> <img src="http://zipline.files.wordpress.com/2010/12/chanukah.jpg" alt="menorah" width="480" height="320" /> </figure> </div> <div class="featureselector"> </div> <div class="featureselector"> </div> <div class="featureselector"> </div> <div class="featureselector"> </div> <div class="featureselector"> </div> </section> </div> <div id="webpagefoot"> <footer> </footer> </div> </div> </body></html> CSS Code: body {/*background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRmopGs4E8JPZw2QSogetRzxjFhMbEPlyS8kY6hBd5mhgYQr-H4);*/background-color: #B57F35;}@font-face { font-family: Dumb1; src: url('2Dumb.ttf');}@font-face { font-family: Dumb2; src: url('3Dumb.ttf');}#container {/*background-color: white;*/width: 960px;margin-left: auto;margin-right: auto;}#webpagebanner {background-color: #EBE5AB;width: 790px;height: 150px;float: right;clear: right;border-top-right-radius: 25px;}#webpagebanner header hgroup h1 { text-align: center; width: 450px; margin-top: 35px; margin-left: 30px; /*background-color: white;*/ font-family: Dumb1; font-size: 42px;}#webpagebanner div { color: green; width: 700px; border: #B34242 solid 1px; margin-left: 45px;}#leftsidebar {background-color: #D9CE57;width: 169px;height: 760px;float: left;clear: left;border-right: blue solid 1px;}#logo { padding-top: 24px; padding-bottom: 24px; padding-left: 34px; padding-right: 34px; background-color: #D9CE57;} #logo div { height: 100px; width: 100px; background-color: red; border: black solid 1px; border-radius: 45px; }#leftsidebarnav { position: fixed;} #leftsidebarnav li { list-style-type: none; margin-top: 8px; margin-left: -1em; border-top: black solid 1px; border-bottom: black solid 1px; width: 120px; text-align: center; font-size: large; } #leftsidebarnav li:hover { background-color: white; opacity: 0.5; }#maincontent {background-color: #EBE5AB;width: 790px;height: 760px;float: left;}#maincontent section { border-bottom: black dashed 1px; padding-top: 15px; padding-bottom: 35px; padding-left: 164px; padding-right: 164px;} #maincontent section #featuredcontent { width: 480px; height: 320px; border: black solid 1px; border-radius: 50px; background-color: green; opacity: 0.5; overflow: hidden; } #maincontent section #featuredcontent figure { margin: 0px; overflow: hidden; border-radius: 50px; } #maincontent section .featureselector { width: 8px; height: 8px; border: black solid 2px; border-radius: 8px; float: right; margin-right: 10px; margin-top: 8px; background-color: red; }#webpagefoot {background-color: yellow;width: 960px;clear: both;} I use a local font but it's not really a big deal that you can't see it. How can I fix the layout so that it does not shift? P.S. Yes it's ugly right now, it's mostly laid out to show me the measurements and how the page is to be divided. Like I said it's bare bones. Or if better I have the files attached as well. But can't upload the ttf.... sorry about that. home.css index.html
-
hi there,I have 2 div's my 1st div is a menu with a bit of css3 in it and the 2nd div is animated art work from adobe edge. what i need:i need the animated div to work in the background of the 1st div and bring the 1st div to the front of the stage the problem:the 2nd div is overlapping the 1st div and stopping the menu from working properly my code: <style type="text/css">/* main menu styles */#nav { display:inline-block; width:100%; margin:0px auto; padding:0; background:#008000 url(../image/bg.png) repeat-x 0 -110px; border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);}#nav li { margin:10px; float:left; position:relative; list-style:none;}#nav a { font-weight:bold; color:#e7e5e5; text-decoration:none; display:block; padding:8px 20px; border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; text-shadow:0 2px 2px rgba(0,0,0, .7);}/* selected menu element */#nav .current a, #nav li:hover > a { background:#42FF42 url(../image/bg.png) repeat-x 0 -20px; color:#000; border-top:1px solid #f8f8f8; box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/ -moz-box-shadow:0 2px 2px rgba(0,0,0, .7); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); text-shadow:0 2px 2px rgba(255,255,255, 0.7);}/* sublevels */#nav ul li:hover a, #nav li:hover li a { background:none; border:none; color:#000;}#nav ul li a:hover { background:#0F0 url(../image/bg.png) repeat-x 0 -100px; color:#fff; border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; text-shadow:0 2px 2px rgba(0,0,0, 0.7);}#nav ul li:first-child > a { -moz-border-radius-topleft:10px; /*some css3*/ -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px;}#nav ul li:last-child > a { -moz-border-radius-bottomleft:10px; /*some css3*/ -moz-border-radius-bottomright:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px;}/* drop down */#nav li:hover > ul { opacity:1; visibility:visible;}#nav ul { opacity:0; visibility:hidden; padding:0; width:175px; position:absolute; background:#95FF95 url(../image/bg.png) repeat-x 0 0; border:1px solid #7788aa; border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-transition:opacity .25s linear, visibility .1s linear .1s; -webkit-transition:opacity .25s linear, visibility .1s linear .1s; -o-transition:opacity .25s linear, visibility .1s linear .1s; transition:opacity .25s linear, visibility .1s linear .1s;}#nav ul li { float:none; margin:0;}#nav ul a { font-weight:normal; text-shadow:0 2px 2px rgba(255,255,255, 0.7);}#nav ul ul { left:160px; top:0px;}</style> <script type="text/javascript" charset="utf-8" src="../anim_edgePreload.js"></script> <style> .edgeLoad-EDGE-16622662 { visibility:hidden; } </style> <div style="width:700px; height:200px;"> <ul id="nav"> <li class="current"><a href="#">Home</a></li> <li><a href="#">My Account</a> <ul> <li><a href="#">Manage My Account</a></li> <li><a href="#">Update Login Info</a></li> </ul> </li> <li><a href="#">Main menu</a> <ul> <li><a href="#">itme1</a> <ul> <li><a href="#">itme11</a></li> <li><a href="#">itme12</a></li> </ul> </li> <li><a href="#">itme2</a></li> <li><a href="#">itme3</a></li> <li><a href="#">itme4</a></li> <li><a href="#">itme5</a></li> <li><a href="#">itme6</a> <ul> <li><a href="#">itme61</a></li> <li><a href="#">itme62</a></li> </ul> </li> <li><a href="#">itme7</a></li> </ul> </li> <li><a href="#">menu 2</a> <ul> <li><a href="#">itme1</a> <ul> <li><a href="#">itme2</a></li> <li><a href="#">itme3</a></li> </ul> </li> <li><a href="#">itme99</a> <ul> <li><a href="#">itme25</a></li> <li><a href="#">itme26</a></li> </ul> </li> </ul> </li> <li><a href="#">Help</a></li> <li><a href="#">Log out</a></li> </ul> <div id="Stage" class="EDGE-16622662"></div></div> any help?
-
Hi, I'm trying to replicate CSS3 transition effects for older versions of IE that don't support these transition effects. I'm trying to use the jQuery: $('#myelement').fadeIn(); However, I'm exceptionally bad at understanding Javascript and need some help making this code do what I want. What I want is when you hover over an image with the class "left1", I want it to grow to the specifications I have in my styelsheet for left1:hover. Of course, while transitioning. I already have the code exactly how I want it for CSS and HTML and already have jQuery linked up with my page. Now how do I integrate the code above for transitioning it? Thanks! P.S. I am aware that having the transition effects while trying to get the jQuery working can cause complications, so when I test it out I will/am removing the transition properties from the stylesheet.
-
What is CSS3 linear? Thanks.
-
Is there a Way with Javascript to add Help bubbles over an input Box?For example when you you hover over an input for Name: _____ it would say like First Name????ThanksAn example is this https://edit.europe.yahoo.com/registration?.intl=ukWhen you go over the name field it says First name in a bubble. Ive been searching all over and can not find out how to do it.
-
Hi, This is my first post. I like to know the following things: What is the matrix () Method in css3? The Tutorial (http://www.w3schools...dtransforms.asp) says that the matrix () method combines all of the 2D transform methods into one. But my question is how? In example, use this following numbers: transform: matrix (0.866,0.5,-0.5,0.866,0,0). My question is How to come this numbers and how I calculate them?Please see the codes here form http://www.w3schools.com CSS3 matrix() Method tutorial: <!DOCTYPE html><html><head><style>div{width:100px;height:75px;background-color:red;border:1px solid black;}div#div2{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}</style></head><body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body></html> No more, I am waiting for your kind response. Thanks
-
Hi all - My end goal is a static image that, when hovered, will darken slightly and white text will slide up and fade in from the bottom of the frame. But I'm not sure of two things: first, how do I have a single div container/hover "area" trigger both animations, rather than just the top-most one? Second, as the animation stands now, it only triggers when I hover over the image - which has been positioned out of frame so as to make the fade/slide-in animation look right. How can I specify the affected hover area so that it triggers an image to arrive from out of frame? Since I suspect that was really unclear, here's what I've got so far. #backgroundimg img { /* static image background*/position: absolute;top: 0;left: 0;z-index: 2;} #anisquare { /* dark square that fades in on hover; width and height are same dimensions as my background image */width:293px;height:272px;position: absolute;top:0;left:0;z-index: 3;background:black;opacity:0;transition:opacity .3s;-moz-transition:opacity .3s; /* Firefox 4 */-webkit-transition:opacity .3s; /* Safari and Chrome */-o-transition:opacity .3s; /* Opera */} #anisquare:hover{opacity: 0.38;} #fadingtext { /* here's where my confusion starts... */position:absolute;top: 0;left: 0;width: 293px;height: 272px;} #fadingtext img {position:absolute;top: 280px;left: -1px;width: 191px;height: 45px;z-index:4;opacity:0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;} #fadingtext:hover { opacity: 1; top: 228px;left: -1px;} As it stands, the image only rolls up and appears when I mouse over the image. I would like it to animate when I mouse over the area specified by the #fadingtext div tag. Also, at the moment, both hover animations are mutually exclusive - eventually I want hovering over a single div container to activate both of them. Many, many thanks in advance!!
-
I have a function witch triggers an series of animations, it uses CSS3 keyframe animations to render them. The weird problem i'm encountering is with my FadeOut animation, it doesn't happen. I have a animation called FadeIn that does the same (but in reverse) but doesn't have any problems running at all. The rotten apple: $"#id").animate("FadeOut", {duration:800, easing: 'ease-out'}).hide(); The working example: $("#id").animate("FadeIn", {duration:800, easing: 'ease-in'}).show(); The CSS3 animations: @-webkit-keyframes FadeOut { 0% { opacity:1;} 100% { opacity:0; }}@-webkit-keyframes FadeIn { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; }} I'm using Zepto.js as a jquery replacement, zepto uses css3 animations. At the end of the animation i'm hiding the content with .hide() this causes the element to change the display to none. display is not animatable so before the display goes to none i use opacity to create the fade out effect. I think it hade something to do with te display but i cant figure out what because the FadeIn doesn't have any problems at all. Look at the demo Thank you!
-
First of all, why isn't there any information about customizing scroll bars using CSS on the w3schools website?? Well anyway, I was trying to figure out how to customize scroll bars and when I Googled it I thought for sure the only way was going to be by using JavaScript, to my pleasant surprise the top of the search was a way using CSS. Although I am aware it is not supported in all browsers. Well, the article I found is from a beloved site: http://css-tricks.com/custom-scrollbars-in-webkit/ and I think one of the states it shows is what I need but I am confused how to use it. What I am trying to do is: I have panels that open and close (using JQuery), these panels are inside a div that is too small for it so I have a scroll bar. When I open the bottom panel, you can't see the panel open because it is hidden by the bottom of the div, you have to then scroll down to view it. I think that using the :decrement state would solve this problem if used correctly but I am confused how it would be used. I've tried Googling further examples but this seems to be a very new unused concept. Could anyone help me solve my problem?
-
Hi all, I'd need to position two background-images in one element seperately.Is this possible in css3? E.g: I've got a div and two background images. Now I'd need to position them seperately. One images in the left, the other one in the right corner. Thanks! Raphael
