Can someone tell me how can I fix this on Chrome? On firefox it works perfectly.
div{position: relative; width:200px; height:200px; overflow:hidden;background-color:#fc0;}; div img{opacity:0.2; transition:all 0.5s}
The code is just a sample of how i am using it. The animation works perfectly on firefox, the image gets circled all the time, but on chrome, when the animation is happening the image is can be seen oout of the circle.
Any help?
Imagem http://studio3pixels.com/img.png
here is a workaround with background images, Hope this solution is good for you:
http://jsfiddle.net/yucp2/
<style>
#wrapper
{
width: 300px; height: 300px;
border-radius: 300px;
overflow: hidden;
border:solid 10px #000;
background-color: #f30;
z-index:3;
}
#wrapper span
{
width: 300px;
height: 300px;
top:0;
background-color: #cde;
transition: all 0.5s;
z-index:1;
overflow:hidden;
background-image:url(http://www.paixaoeamor.com/arquivos/fotos/A777C.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
display:inline-block;
background-position:center center;
}
#wrapper:hover > span
{
opacity:.5;
background-size:120% 120%;
}
</style>
<div id="wrapper">
<span></span>
</div>
Related
I want to display some CSS3 animation inside a div box. So I need to apply overflow:hidden for unwanted overflow.
In case of test at fiddle its work well. But If I apply overflow:hidden at parent div in my page, its not display child content anymore.
Please see my fiddle and help me.
My Css:
.movcontainer{
position: absolute;
top:200px;
width:100%;
height:89%;
overflow:hidden;
z-index:55;
display: block;
border: 2px solid blue;
}
.contentbody{
position:fixed;
top:0px;
width:100%;
height:100%;
border: 2px solid green;
}
.parent{
position: absolute;
top:10%;
left:10%;
width:80%;
height:80%;
border: 2px solid red;
text-align:center;
display: inline-block;
clear: both;
overflow:hidden;
}
.child {
background-image:url('http://fallmeeting.agu.org/2012/files/2012/09/Dust-and-Aerosols-SWIRL-graphic.jpg');
border: 2px solid green;
width:600px;
height:600px;
background-position: center center;
background-repeat: no-repeat;
margin:auto;
transform-origin: center;
}
Update:
Here I have two more div which create for few positioning. One .movcontainer and other .contentbody. Here .contentbody have fixed position and problem occurred here. But this two div is essential for me.
Here is my update fiddle
Solved this problem by replace position:absolute by position:fixed on .parent div.
I want create a div with a shape as shown above and I want it to be 100% width.
Below is the HTML and CSS that I tried.
I was able to make a triangle but it doesn't work with 100% width of div:
HTML:
<div class="triangle-up"><div></div></div>
CSS:
.triangle-up {
width: 25%;
height: 0;
padding-left:25%;
padding-bottom: 25%;
overflow: hidden;
}
.triangle-up div {
width: 0;
height: 0;
margin-left:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #4679BD;
}
how about 3d css transformation?
html:
<div class="triangle-up"><div></div></div>
css:
body{
background:black;
}
.triangle-up div{
width:400px;
height:150px;
background:cyan;
-webkit-transform:rotateY(40deg);
margin:50px;
}
.triangle-up{
-webkit-perspective: 500px;
}
here is an example FIDDLE
EDIT:
basically you give the container div triangle-up a depth of 500px; and you rotate the inner div by its y-axis.
a more thorough explanation can be found in THIS nice article.
You can use the pseudo elements with transform:rotate().
FIDDLE
This makes 2 seperate elements (the pseudo elements :before/:after) with the same background color as the div and rotates them to create your desired shape.
You can display an image in the background.
Responsive width and height.
As the tranform property isn't on the div element, it will alow you to put content in your shape without transfoming it.
Less HTML markup.
HTML :
<div></div>
CSS :
div{
height:40%;
margin:10% 0 0;
background:#1EC8D7;
position:relative;
z-index:2
}
div:after,div:before{
content:"";
position:absolute;
background:#1EC8D7;
width:110%;
height:100%;
z-index:-1;
right:0;
}
div:before{
top:0;
transform-origin:100% 0;
-ms-transform-origin:100% 0;
-webkit-transform-origin:100% 0;
transform:rotate(2deg);
-ms-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
}
div:after{
bottom:0;
transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
}
JSBIN
HTML
<div class="container"><div class="triangle-up"><div></div></div></div>
CSS
.container{
width: 500px;
background-color: #000;
overflow: hidden;
}
.triangle-up {
height: 0;
padding-bottom: 24%;
}
.triangle-up div {
width: 0;
height: 0;
border-left: 900px solid #4679BD;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
The result on chrome and ie10 are work, but not work on firefox.
I would like to add the shadow background at the bottom of div
please take a look on this
http://jsfiddle.net/yokosatan/mv83a/
Here is the code of HTML
<div class="box">
<div class="logo">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMLZg7HAU1G8n8ZKnOeai4EsUUtwyyWamco2hPHLjFx2Hl2X3mwQ" border="0"/>
</div>
<div class="name">Name</div>
</div>
And CSS code
.box
{
text-align:center;
width:105px;
}
.name
{
font-size:11pt;
margin-top:8px;
text-transform:uppercase;
}
.logo
{
width:105px;
height:105px;
background:white;
display: table-cell;
vertical-align: middle;
position:relative;
}
.logo:after
{
content:url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
position:absolute;
bottom:-15px;
display:block;
height:15px;
}
.logo img
{
margin:0 auto;
max-width:85%;
width:85%;
max-height:85%;
}
Question is how to do the same result as chrome or ie that display.
Additional, it could be other solution that give the same result for all web browsers.
Thank you
Update: I think the cause is that I make display
display:table-cell;
I change to be display block and it's work, but I want to make logo to be center vertically.
What should I do?
Instead of using content: url(); use content: ' '; and use background-image and it should work for you
Demo
.logo:after {
content:' ';
height: 15px;
width: 100px;
background-image: url('http://s24.postimg.org/f1dompt4x/shadow_test.png');
position:absolute;
top: 110px;
display:block;
background-repeat: no-repeat;
}
Edit:
As you had issue using display: table-cell;, you can use display: block; instead and use position: absolute; for the img tag and use top and left with custom values to set the image vertically middle.
Demo
use content as ""
and add background
.logo:after
{
background:url("http://s24.postimg.org/f1dompt4x/shadow_test.png") repeat-x scroll center bottom transparent;
content:"";
position:absolute;
bottom:-15px;
display:block;
height:15px;
width:110px;
}
I know it's been asked a few times, but upon playing around a bit I still couldn't center what I need to. What I'm looking to do it center those buttons vertically on the page. I want to put centered text above it, too.
My (sloppy) code: JsFiddle
HTML:
<div>
</div>
CSS:
div {
text-align: center;
}
a {
text-align: center;
margin: auto;
}
.cbtn {
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Here is one way of doing it, assuming you want the buttons centered both horizontally and vertically on the page.
The HTML is:
<div class="wrap">
<div class="button-wrap">
</div>
</div>
and the CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
}
.button-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 60px;
width: 350px;
margin: auto;
text-align: center;
}
You need to declare the width and height properties of the body and html elements to be 100%, and the same for div.wrap.
The trick is to wrap the links/buttons in div.button-wrap, which is absolutely positioned and given specific width and height values to match the buttons. The height of 60px is based on the height of the .cbtn, and the width of 350px is 5 times (60px + 2x2px + 2x1px + 4x1em) which is about 350px. However, since we can use text-align: center for centering the inline blocks, the exact width is not too critical, just make it wide enough.
The centering works by setting all the position values to 0 (left/right/top/bottom) and then setting margin: auto.
This is all based on CSS 2.1 so it should work in most browsers. The only limitation is the inline-block property, which IE7 does not recognize.
However, since you are using CSS2 animations, inline-block is probably okay.
Fiddle reference: http://jsfiddle.net/audetwebdesign/METYC/
Full page view: http://jsfiddle.net/audetwebdesign/METYC/show
check this :
http://jsfiddle.net/AT8S6/
you can change the width,height and margin property of section for different results .
HTML
<div>
<section>
</section>
</div>
CSS
div {
text-align: center;
height:400px;
width:100%;
border:2px #000 solid;
}
a {
text-align: center;
margin: auto;
}
div section {
width:65%;
height:50%;
margin:20% auto;
}
.cbtn {
display:block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
float:left;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
You could set the following rules on the div:
div {
position: absolute;
left: 50%;
height: 50%;
margin-top: -(height of div);
margin-left: -(width of div);
}
Example link below:
http://jsfiddle.net/AT8S6/1/