I've been digging all day long with this and can't make it work properly. I'm not a coder, so maybe that's the problem. Anyway, I'm trying to make my logo appear nicely when screen size changes. I realize I can't do it with display:none; to display:block; so I have tried visibility, opacity and height transition.
If you look at this code below, you'll see that when going from larger screen to smaller, there's sort of delay that appears before fading out, then height animation plays. However, if you go from smaller window to larger, it transitions like 2x faster. I'm not sure how to make it reverse, so animation is smooth going back and forth. I tried to play with numerous snippets from the web, but nothing let's me control the animation properly.
My idea is to hide logo on mobile devices, but when ppl flip a tablet, a nice transition would let logo appear for larger screens (and not only mobile, just re-sizing desktop browser would make it look more professional). Hope you can help.
.wrapper {
width: 500px;
background-color: #0C6;
}
.nav {
background-color: #69C;
}
.logo {
max-height: 0px;
background-color: #FC3;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
visibility: hidden;
opacity: 0;
}
#media screen and (min-width: 500px){
.logo {
max-height: 200px;
visibility: visible;
opacity: 1;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="logo">logo<br>
<br>
<br>
<br>
</div>
<div class="nav">nav</div>
</div>
</body>
</html>
You need a transition on both ends, and your transition value is invalid:
.logo {
max-height: 0px;
background-color: #FC3;
-webkit-transition: max-height 1s linear, opacity 1s linear;
-moz-transition: max-height 1s linear, opacity 1s linear;
-o-transition: max-height 1s linear, opacity 1s linear;
transition: max-height 1s linear, opacity 1s linear;
visibility: hidden;
opacity: 0;
}
#media screen and (min-width: 500px){
.logo {
max-height: 200px;
visibility: visible;
opacity: 1;
-webkit-transition: max-height 1s linear, opacity 1s linear;
-moz-transition: max-height 1s linear, opacity 1s linear;
-o-transition: max-height 1s linear, opacity 1s linear;
transition: max-height 1s linear, opacity 1s linear;
}
}
Ok finally made it work after playing around and researching a bit. Once I learned to control animation with delays on both sides it became easier.
.wrapper {
width: 500px;
background-color: #0C6;
}
.nav {
background-color: #69C;
}
.logo {
height: 0px;
background-color: #FC3;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
-moz-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
-o-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
}
#media screen and (min-width: 500px){
.logo {
height: 100px;
visibility: visible;
opacity: 1;
-webkit-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
-moz-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
-o-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="logo">logo<br>
<br>
<br>
<br>
</div>
<div class="nav">nav</div>
</div>
</body>
</html>
Thanx to the following:
http://www.greywyvern.com/?post=337
and Rémi Breton answer at:
CSS transition shorthand with multiple properties?
hope this can be useful for others as well!
Related
I want two slide revolutions (or at least one), but with this skin over it:
The overlay image would be on top of the images, so clicking the gallery would be impossible (and the bullets to change image inside of it). I know about map coordinates, but it's a slider revolution, so it will not work in this case I think.
Is there any way to achieve this?
My HTML & CSS so far: (JSFiddle)
<div class="thePNG"></div>
<div class="theSLIDERS">
<div class="fakeSLIDER1">HEY' IM CLICKABLE</div>
<div class="fakeSLIDER2"></div>
</div>
.thePNG {
background-image: url(my-overlay-image.png);
width: 787px;
height: 610px;
background-size: cover;
z-index: 2;
position: relative;
}
.theSLIDERS{
margin-top: -600px;
z-index: 1;
}
.fakeSLIDER1{
background-color: red;
width: 700px;
height: 300px;
text-align: center;
margin: 0 auto 0 auto;
}
.fakeSLIDER2{
background-color: green;
width: 700px;
height: 300px;
}
I found my own answer!
its easy:
CSS:
"pointer-events: none;"
!
I'd like to ask if it's possible to keep the same background image while sliding on my webpage (using the image icons).
I wanted to keep the background from the mainpage (somehow fix it there) and just make the content 'slide on it'. I used this jquery - javascript method to make the slides.
Used these old jquery function for the sliding:
/* jQuery.ScrollTo
/* jQuery.LocalScroll
/* Fire Horizontal Scroll */
(full code is on the linked page)
The 9 'slides' are put in a wrap. The first one is the mainpage.
<body>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p> « HOME </div>
<div id="three"><p>THREE</p> « HOME </div>
<div id="four"><p>FOUR</p> « HOME </div>
<div id="five"><p>FIVE</p> « HOME </div>
<div id="six"><p>SIX</p> « HOME </div>
<div id="seven"><p>SEVEN</p> « HOME </div>
<div id="eight"><p>EIGHT</p> « HOME </div>
<div id="nine"><p>NINE</p> « HOME </div>
</div>
Here is the interesting part of the css
#wrap {
min-height: 100%;
width: 900%;
overflow: hidden;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 11.1%;
float: left;
text-align: center;
}
* html {background:url(images/mainfull.jpg)}
* html #full {height:100%;}
Thanks for help
[SOLVED] All you have to do is change the background position to fixed instead of absolute.
.background-image {
background: url(images/mainfull.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 3s;
-moz-animation-name: fade-in;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-animation-fill-mode: forwards;
background-image: url('images/mainfull.jpg');
background-position: center center fixed;
background-repeat: no-repeat;
}
I'm trying to make two input buttons (yes/no) display on the same line with maximum width for both. I want the width of the buttons to scale down in size as the browser window size decreases.
http://jsfiddle.net/jasonniebauer/grQGP/1/
<div id="merchant_radio6">
<p>
Ever accepted credit cards before?
</p>
<div>
<input type="radio" id="yes" name="accept_cc"/>
<label for="yes">
Yes
</label>
<input type="radio" id="no" name="accept_cc"/>
<label for="no">
No
</label>
</div>
</div>
#merchant_radio6 input[type="radio"],
#merchant_radio7 input[type="radio"] {
display: none;
}
#merchant_radio6 input[type="radio"] + label,
#merchant_radio7 input[type="radio"] + label {
box-sizing:border-box;
padding: 1rem 3rem 1rem 3rem;
width: 100%;
display: inline-block;
color: #BDC3C7;
background-color: #F2F2F2;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 3px;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
-webkit-transition-property: border, color, background-color;
-webkit-transition-duration: 0.25s, 0.25s, 0.25s;
-webkit-transition-timing-function: linear, linear, linear;
-webkit-transition-delay: initial, initial, initial;
transition: border .25s linear, color .25s linear, background-color .25s linear;
transition-property: border, color, background-color;
transition-duration: 0.25s, 0.25s, 0.25s;
transition-timing-function: linear, linear, linear;
transition-delay: initial, initial, initial;
}
#merchant_radio6 input[type="radio"] + label:nth-of-type(2),
#merchant_radio7 input[type="radio"] + label:nth-of-type(2) {
margin-left: 1rem;
}
#merchant_radio6 input[type="radio"]:checked + label,
#merchant_radio7 input[type="radio"]:checked + label {
background-color: #3498DB;
color: #FFFFFF;
outline: 0;
}
Set each button width to 50% and set them to float: left. If you want space between your buttons, you'll need to do something like width: 49%; margin-left: 1%;
Each button needs to be set to 50% width or less for them to appear on the same line. When width is set as a percentile, it uses the parent's width to calculate its own width - it makes no adjustments based on sibling elements' widths.
Edit: because you have margins set, these will need to be at <50% width. For most (all?) browsers, margins are calculated separately from width when considering display. E.g. an element that's 50% width and has a 10px margin on each side will take up more than 50% of its parent container's width. Note that some browsers might also treat borders this way.
I've created a div, where in I've to write css for creating border-radius to that div. So I wanted the border-radius should be like the following image.
The CSS code what I've written is as follows.
{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 6% 60%;
border-bottom-right-radius: 6% 60%;
margin: 10px 0;
color: #FFFFFF;
background: -moz-linear-gradient(top, #2ea2f5 0%, #2ea2f5 50%, #0089f3 50%, #0089f3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2ea2f5), color-stop(50%,#2ea2f5), color-stop(50%,#0089f3), color-stop(100%,#0089f3));
background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: -o-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: -ms-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
background: linear-gradient(to bottom, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ea2f5', endColorstr='#0089f3',GradientType=0 );
}
And even you can go through it jsfiddle.net
So please help me I've stuck with this from 2 days.
Well, I managed to do something similar, and it should be cross-browser supported ( after small edits ) :
http://jsbin.com/elubek/1/edit
CSS:
div.wrapper {
position: relative;
width: 450px;
}
div.tag {
width: 400px;
padding: 3px 10px;
height: 74px;
background: -webkit-linear-gradient(top, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
border-radius: 5px;
position: absolute;
top: 0;
z-index: 120;
}
div.box1 {
height: 62px;
width: 62px;
right: 0px;
top: 9px;
border-radius: 10px;
z-index: -1;
position: absolute;
-webkit-transform: rotate(-45deg);
background: -webkit-linear-gradient(top right, #2ea2f5 0%,#2ea2f5 50%,#0089f3 50%,#0089f3 100%);
float: right;
}
div.circle {
width: 10px;
height: 10px;
position: absolute;
z-index: 5;
border-radius: 100px;
background: white;
right: 10;
top: 35px;
}
p {
font-family: 'Verdana';
color: white;
margin: 0;
}
p.prgress-info {
font-size: 25px;
letter-spacing: -1px;
padding-top: 10px;
}
p.deadline {
padding-bottom: 19px;
font-size: 12px;
font-weight: normal;
}
p.deadline span { font-size: 14px; }
HTML:
<div class='wrapper'>
<div class='tag'>
<p class="prgress-info">003. In progress</p>
<p class="deadline"><span>7</span>/ Deadline: 30 July 2013</p>
</div>
<div class='box1'></div>
<div class='circle'></div>
</div>
You can play with the height/width of div.box1, to achieve the radius you want ;)
border-radius does allow some complex shapes, using it's extended syntax. For example:
border-radius:15px 25px 25px 15px / 15px 45px 45px 15px;
See http://jsfiddle.net/tDCaA/1/ for this in action. It's heading in the direction you're looking for, but doesn't quite achieve it.
The trouble is that further tweaking doesn't get much closer -- with the straight lines you've got on the sample image, you're really not looking at a border-radius effect at all; it's a more complex shape than border-radius is designed to do. So my advice would be to stop focusing on border-radius as the answer here, and look for alternatives.
So what alternatives are there? Here are a few you could try:
An SVG image. This example is a good case for an SVG image, as you've got a few little design elements in there like the white hole at the end of the tag which aren't easy to achieve in CSS.
A CSS triangle. Draw the end part of the tag using the old triangle hack with a CSS border. You may have trouble getting the corners rounded on this though.
Rotation. Create a second element (possibly using the CSS :after selector), that will act as the end piece of the tag. Then use CSS to rotate it 45 degrees to give it the required shape. To be honest though, I would consider using rotation for this to be overkill, and not great for browser performance. It should work though. And since we're already rotation, you could also use other transform effects to tweak it to the desired shape.
CSS border-image. CSS also has a border-image property that can be used to do complex borders. Combined with SVG, this can be very powerful and can give you all the variable shaped borders you want. Most modern browsers support it now (http://caniuse.com/#search=border-image).
An old-school background image. Don't be afraid of just using a plain png background image for this kind of thing. All the techniques above have their place, but background images work well and have compatibility with old browser versions. There's nothing wrong with using them for this kind of thing if the other solutions don't work for you.
Using the code below, both Chrome and Opera (latest versions supporting border-radius) on Mac show a small blue area outside the rounded corners (which seems to a part of the defined background-image). Why?
<!doctype html>
<head>
<title>Testcase for rounded corners on submit button with bg-image</title>
<style type="text/css">
input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px }
</style>
</head>
<body>
<form>
<div><input type="submit" /></div>
</form>
</body>
I worked around this with background-clip: http://www.css3.info/preview/background-origin-and-background-clip/
background-clip: padding-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
FF3.6 does it as well, but not as noticeably (with -moz-border-radius, of course). Looks like they're trying to automatically smooth out the corners, and just can't hide all of the background when there's also a border applied. Removing the border declaration (not the border radius) will fix it. So:
border-radius: 10px; border: 1px solid #fff; making it: border-radius: 10px;
I suspect, but don't know, that this has to do with the difficulties of faking half-pixels and nesting round shapes in more of a bitmap than vector 'space'.