Topics Tagged with css3

I am working on an image cropper. And I am on the first stages. I want to know how to create the the two divs over the image, one is transperent while the other acts as a mask. Can this be done with CSS? Or should I consider jQuery? This is what I want to accomplish ...  I just want to know how to create this overlay image feature.

Hello i want to create in html and css something like the picture i shared here. An image over two divs. Equally divided through the two divs like the picture here. Any sugestion? 

Hey everyone, I'm at a stand still at this bit of code. Ultimately, I want to "expand"/slide down a class to show the rest of the hidden content (the list items with the class of ".hide") inside of that containing div. Sliding down the prices, hr line, and the "Get Started" button so that the content that would now be shown at hover, but at sliding back up the now shown content, would slide back to its original state when "not" on hover. I thought that by either taking away the class via jquery would solve the issue, but no. …

Need help to add css transition effects to this https://jsfiddle.net/az9yt611/ floor item 1 is selected, when it changes to floor item 2 is selected add effect to its inner div's, i.e. Left & Right. Add cube **To Top** transition to **left div** & **To Bottom** to **right div**, on next click. When Previous is clicked add **To Bottom** to **left div** & **To Top** to **right div** When next or previous item is displayed animate left div & ight div, back n forth **PageTransitions** https://tympanus.net/Development/PageTransitions/

Hello i want to create a horizontal menu divided equally in 4 same width parts. I don't want its width to change. Any ideas? Something like this https://jsfiddle.net/simonioa/t6vqqva2/ but not with <span> elements. Menu should have 4 colors horizontally but would not have to change acoording to html content. I dont know how else to explain it

Hello i want to add some CSS3 filters on a background image but the effects take place on the text too not just the background image. Here is the css code <div style="color:whitesmoke; background-image:url(wall_icons/uploadMedia.png); background-size:contain;-webkit-filter:grayscale(1.7); filter: brightness(0.2); -webkit-filter: brightness(0.2); -moz-filter: brightness(0.2); -o-filter: brightness(0.2); -ms-filter: brightness(0.2); background-repeat:no-repeat"> <small style="font-size: 3vmin;">Text.Text.Text.Text.Text.Text.</small> </b> </div>

Hello i want a script that shows various text content in the foreground and closes witn an X and shows the original page. Any suggestions?

Hi guys, I am facing a little bit problem in mobile menu design. In android is working fine but in iOS safari or chrome has the same issue where I press on the Menu and press on dropdown menu, I cannot scroll to bottom of other <li> element This is my steps to discover the error in iPhone: 1) Access to the website : [Click Here](https://goo.gl/0SZmx2) 2) Click on Menu 3) Now you will see Home, Search, For Sale, For Rent, Our Team, About Us and Contact Us 4) Only For Sale and For Rent are drop down. Press on …

Fulllscreen div misbehave on window resize. [Demo](https://jsfiddle.net/y2d7dbod/) **fullpage** is main container having fullscreen height & width. **section** is inner div of full height & width. When window is resized after scrolling to any div it leaves some space from top. How to make it responsive & scrolling fullscreen page? (section should stick to top & left : margin, padding to left = 0) **Menu** <ul id="menu"> <li><a href="#section-0"> home </a></li> <li><a href="#section-1"> about </a></li> <li><a href="#section-2"> services </a></li> <li><a href="#section-3"> gallery </a></li> <li><a href="#section-4"> contact </a></li> </ul> **Fullscreen Div container, .fullpage, Contains Fullscreen Div .section** <div class="fullpage"> <div class="section" id="section-0"> …

I have a problem with the CSS for the logo. I want my logo to be in the middle horizontaly every time but my logo isnt aligned with the centered image in the backgroundand, the logo isnt right in the middle of the browser .With my css code the logo isnt in the center horizontally. I have no idea where is the problem. My CSS is: #logo { display:inline-block; margin:10px auto 0 auto; } #logo img {max-width:330.5%; } #logo a{ display: block; margin-left: 0%; margin-right: 0%;} Pls tell me how to center a logo right in the middle with a …

https://jsfiddle.net/yr2r4Ldj/4/ I've tried 5 different solutions, **FIVE** of them, and **NONE** of them work. I hear Microsoft laughing ever so evily around the corner while grinding hands against one another like a psychopath. Does Microsoft hate developers or something? THEIR OWN FILTERS, DON'T WORK. WHY PROVIDE IMPLEMENTATION OF SOMETHING THAT DOESN'T WORK?!? Is there no way to create something familiar to `text-shadow` in Internet Explorer 9? I was caught surprized that `box-shadow` **is actually supported** at Internet Explorer 9. But `text-shadow`, nah, who would need tinted text from bright background, when you can give shadow to a block, aren't I …

HI I have this in wordpress css: * { padding: 0; margin: 0; } How can I disable `margin: 0;` in child theme? Thanks

https://jsfiddle.net/fzbx09qL/1/ Having above code. This is as far as I've gotten. I need someone to instruct me on three things. First off, how do I make sure it appear smoothly? I have `transition` but it doesn't seem to work, must be other way. Second, there is some code that I commented out in HTML box. When I add it, the entire "dropdown" breaks. This might be because of links, but in future I'd really need it. Is there a work-around? Third, it seems this box is a little bit off to the side, is there a way to place it …

In this HIML I am flipping an icon on a hover using CSS3 transform. When this HTML is run, the hover is contained in the vertical dimension but not in the horizontal dimension. I wonder if anyone know why? <!DOCTYPE html> <html> <head> <title>Flip Card Demo title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/icon" href="favicon.ico" /> <style> header, footer, section, aside, nav, article { display: block; } .mainContainer{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .flipContainer:hover .flipImage { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .flipContainer .flipImage, .flipContainer:hover .flipImage { width: 256px; border: 2px …

Hello i want my website to be responsive i have made media querries for several devices. There is one thing i cant understand on my mobile phone that says analysis 720X1280 and its 5.0 inch sreeen phone here are the media querries. <style type="text/css"> .box { width:80% } .block { padding-bottom:3%; } .one { background: rgba(66, 132, 243, 0.6); border-top:thick solid #4284f3 } .two { background: rgba(233, 67, 53, 0.6); border-top:thick solid #e94335 } .four { background: rgba(51, 168, 2, 0.6); border-top:thick solid #33a802 } .three { background: rgba(250, 187, 4, 0.6); border-top:thick solid #fabb04; } #logo-rovespier { display: none; …

I am trying to learn how to do cool CSS3 menues. I have a good understanding of CSS, but I can't seem to fix this problem. Here is my code so far: /* Menu 2 */ ul{ list-style:none; width:150px; height:auto; background-color:#FFF; padding:0px; } ul li{ padding:15px; list-style:none; color:#333; background-color:#09C; } ul li ul{ width:135px; height:auto; display:block; padding:0px; background-color:#FFF; } ul li ul li{ background-color:#FFF; list-style:none; padding:0p; margin:0px; } And here is my HTML: <!-- Navigation --> <div class="Container-1A"> <ul> <li>Animals <ul> <li>Bears</li> <li>Cats</li> <li>Dogs</li> <li>Bats</li> </ul> </li> <li>People <ul> <li>Fat</li> <li>Ugly</li> <li>Beautiful</li> <li>Sexy</li> </ul> </li> <li>Wallmart <ul> <li>People</li> <li>Celebrities</li> </ul> …

Hi Guys i need help with media queries. I have 2 divs with class div : class1="flags-desktop" and class2="flags-mobile" in my website! one for mobile and one for desktop or normal screen big then 1000px. So for default the div class1="flags-desktop" is showing and class2 is hide. with css d display:none and made this javascript <script> $(window).resize(function() { if ($(this).width() < 1024) { $('.flags-desktop').hide(); $('.flags-mobile').show(); } else { $('.flags-desktop').show(); } }); </script> This working, but not the way i wanted, because if i refresh the page, on mobile, i get the class for desktop, and the some happen if the …

Please give any idea

Hello, I have created a small CSS checkbox and radio buttons. But the problem is that when I check only one, all of them check with that one. So I can't check a single box. Can you check the code a tell me what is wrong. here is the page where I am testing: http://www.farrislab.net/checkbox/ Thank you, Farris

Hi, I have several image tags overlapping using css and am able to use hover to make the one selected move to the top of he pile. #gallery img{ float: left; width: 250px; height: 250px; position: relative; } #gallery img:nth-child(2) { left: -200px; } #gallery img:hover{ z-index: 10; } I am unable to make the hovering item stay on top of the pile `img:active` does not work. If i add anchor tags around the image tags the positioning does not work. I am not sure what to do.

Hello everyone, Have a code that works well but I need it to open to the right on hover. Right now its going below the element and making my page look bad. Here is the code i have: <style type="text/css"> .hide_img3 { display: none; } .hide_img3 { background: none repeat scroll 0 0 #333; border: 1px solid #000000; border-radius: 4px 4px 4px 4px; color: #78C102; height: 85px; display: none; position: relative; margin-left: 12px; margin-top: 0px; width: 145px; } .myClass:hover .hide_img3 { display:block } </style> <div class="myClass"> <div> <a class="show_img3" href="#"><span>Login</span></a><div class="hide_img3"> <form action="" method="post" name="login"> <input style="border-radius: 4px 4px 4px …

Hi I have a header div which includes two divs inside as #logo and #social.Please visit this link in JSFIDDLE: [Here ](http://jsfiddle.net/Behseini/2jPrD/1/) now I have to problem to present the page 1- I would like to position the social div (right div) at the bottom of the header(parent div).can you please let me know how to do it? 2- There is also an issue with the layout which I couldn't figure it out! while the #logo and the #social are positioned inside the #header div but the seem be appear out of div scoop! as you can see id this …

Hi, I'am newer in PHP development.I have a question please,Is there any way to create a web application with AngularJS, HTML5, and CSS3 as front end, and NodeJS as back end ,and PHP5 as a the restful web service? thanks for Help

Hi All, I would greatly appreciate considered recommendations on books pertaining to HTML5, CSS and Javascript, for starters, either as dedicated subject reference or in some combination. If a combintion of these subjects are addressed in a given book then additional subject matter (such as game applications, jQuery, mobile applications, etc.). After being away from the industry for about the last 15 years, I've recently decided to get back into the IT field - first by getting a firm grasp of fundamental website mechanics, design and creation, and then re-acquainting myself with IBM (formerly Lotus) Notes and Domino. My initial …

hello, i have ul li html structure and i am trying to make tree horizontally My Code Below please suggest me how can i do using css ? <div class="tree"><ul><li><a>SIRE: Cadenza F F58 Barney CA1FF0058</a><ul><li><a>SIRE: HV International F D3106 HVIFD1306 </a></li><li><a>DAM: Amani Elizabeth 5UBFA0550</a><ul><li><a>SIRE: Amani Lancelot 5UBFW1008</a></li><li><a>DAM: Amani F X2073 5UBFX2073</a></li></ul></li></ul></li><li><a>DAM: Dudauman Park F F30 DPKFF0030</a><ul><li><a>SIRE: Dudauman Park Pharoah (ET) DPKFB6009</a><ul><li><a>SIRE: Farmworld War Lord (Imp SAF) (ET) FWBWUL1A</a></li><li><a>DAM: Terra Cotta Thirty Eight (ET) CJVFU0038</a></li></ul></li><li><a>DAM: Dudauman Park F D8012 (ET) DPKFD8012</a><ul><li><a>SIRE: Campbell'S Tindarra Stately (ET) CTBFZ4203 </a></li><li><a>DAM: Dudauman Park F A5014 (ET) DPKFA5014</a></li></ul></li></ul></li></ul></div> see attachment output file that i needs. thankyou.

Hi Friends, After working for 2 days I finished my homepage design with HTML5 and CSS3 syntax. but when I open this on my Android chrome browser everything looks messy as well as half information. ex: I created three menu tabs but on my mobile browser i could see only one...rest may be out of screen. + I added text on my image they too also looks misalignment. What do we have to do to make same code run on mobile browser as well? Thanks, Regards, Ankit Baphna

Hello Everyone, I am looking to start taking courses again in HTML5 and CSS3 with the goal of obtaining employment. I will be building my portfolio and studying quite a bit on my own via Lynda.com, but I am very curious as to what the most respected online course cirtifications are. Any advice on how to best prepare myself for the job market is greatly appreciated. Thank you for taking the time to read and or respond. Colin

Hey guys, so I'm creating this webapp that creates a QrCode based on informations given by the user, decodes QrCodes and creates a log. I would like some tips, like QrCodes, Image processing, Getting SubImages libraries and API's. I'm using HTML5, CSS3 and JavaScript. This webapp will be able to Android, Firefox OS, Tizen OS, Windows Phone and iOS devices. Thanks bros

I have a couple child divs nested inside a parent div, and the children expand on hovering. Problem is that the neighbor div of the parent gets over-lapped by the children. I could just account for the size when the children are open and resize the parent div to that max height, but it would look much better if handled dynamically. Bassically: # HTML <body> <div id="Parent_1"> <div id="Child_1"> </div> <div id="Child_2"> </div> </div> <div id="Parent_2"> <div id="Child_3"> </div> <div id="Child_4"> </div> </div> </body> # CSS /* simplified example...the child elements are actually nested within a wrapper */ /* so …

I have four list items in my <nav> bar: Home, Projects, Resume, Contact Projects item has further five list items. When I hover on "Projects", these items appear as a drop down block, but they are not aligned with the parent element. /*Display Nav elements in row*/ nav > ul > li { display: inline-block; background-color: #D2D4C9; } /*Hide child elements and fix position*/ nav > ul > li > div { display: none; position: absolute; visibility: hidden; z-index: 100; } /*Expand list on hover*/ nav > ul > li:hover > div { display: block; visibility: visible; } /*Display child …