I'm making a web app for Google Chrome (so no need for cross browser support) and I'm making an animated tutorial that will run when it first boots. I'm drawing a box on the screen by having four different div elements with -webkit-transistions for width and height properties respectively. Then I'm using javascript to add classes to these borders and make them draw on the screen. It was all working fine until I got to the border on the right-hand side. I want my borders to draw like this: left goes down, bottom goes right, right goes up and then top goes left. It all worked properly until I got to the right border. It draws from top to bottom instead of bottom to top. I tried rotating it with -webkit-transform:rotate(180deg) but that didn't really help. Here's the code:
<html>
<head>
<style>
button {
background-color:lime;
background-image:-webkit-linear-gradient(top, lime, green);
border:solid 1px 000000;
cursor:hand;
border-radius:10;
outline:none;
width:50px;
}
.left {
width:5px;
height:0%;
border-right:solid 1px 000000;
background-color:ffffff;
-webkit-transition:height 2s;
}
.bottom {
width:0%;
height:5px;
border-top:solid 1px 000000;
background-color:ffffff;
position:absolute;
left:13px;
-webkit-transition:width 2s;
}
.right {
width:5px;
height:0%;
border-right:solid 1px 000000;
background-color:ffffff;
position:absolute;
right:11px;
top:10px;
-webkit-transform:rotate(180deg);
-webkit-transition:height 2s;
}
.top {
width:0%;
height:5px;
border-bottom:solid 1px 000000;
background-color:ffffff;
position:absolute;
left:13px;
top:7px;
-webkit-transition:width 2s;
}
.leftdraw {
height:99%;
}
.bottomdraw {
width:98%;
}
.rightdraw {
height:96.5%;
}
.topdraw {
width:98%;
}
</style>
<script>
function begintut() {
document.getElementById("left").classList.add("leftdraw")
setTimeout("document.getElementById('bottom').classList.add('bottomdraw')",2000)
setTimeout("document.getElementById('right').classList.add('rightdraw')",4000)
setTimeout("document.getElementById('top').classList.add('topdraw')",6000)
}
</script>
<title>Tutorial - Inscribe</title>
</head>
<body onload="begintut()">
<div class="left" id="left"></div><div class="bottom" id="bottom"></div><div class="right" id="right"></div><div class="top" id="top"></div>
</body>
</html>
The issue lies with your initial position of the top and right divs. If you make the following changes to your right and top classes, I think you will achieve your desired effect.
.right
change top:10px; to bottom:10px;
.top
change left:13px; to right:13px;
Related
I have a question regarding on styling the border-style: dotted.
What I want to achieve is adding the glow on each of the circle/dot. Is it possible or achievable?
Since each time I try to add the glow effect, it will go directly towards whole edge of the div border.
I would like to add glow effect to those tiny little dots.
Hope anyone could enlighten me on this matter.
Thank you!
You can try a drop-shadow filter:
.box {
display:inline-block;
padding:30px 80px;
position:relative;
z-index:0;
}
.box::before {
content:"";
position:absolute;
z-index:-1;
inset:0;
border-radius:100px;
border:10px dotted red;
filter:drop-shadow(0 0 3px green);
}
<div class="box">
Some text
</div>
Even a blur filter can work to give a different output:
.box {
display:inline-block;
padding:30px 80px;
position:relative;
z-index:0;
}
.box::before {
content:"";
position:absolute;
z-index:-1;
inset:0;
border-radius:100px;
border:10px dotted red;
filter:blur(2px);
}
<div class="box">
Some text
</div>
I'm working on a website and I've just noticed that the body doesn't seem to accept overflow:hidden on the Google Chrome app on my Samsung phone. I used to have an iPhone and I didn't experience this problem with the Chrome iOS app, but I've noticed that this code is sketchy at best – I also had a difficult time getting it to work on Safari desktop browser. I've tried using a wrapper around my content and this hasn't made any difference.
What happens is that when the user opens the push menu using the button on the left of the header, the viewport seems to expand, so the header extends in order to fill it, making the logo and the other button slide to the right. You're then able to scroll right and zoom out further, making everything smaller and breaking my meta viewport tag, which I obviously want to avoid. I've tried using touch-action: pan-x; which stops the user scrolling right, but doesn't actually solve the issue of the viewport expanding and taking the header with it.
Adding overflow-x:hidden to the html tag solves this problem on mobile, but that in turn breaks the overflow:hidden I've added to the body and allows users to scroll up and down on the desktop version when the menu is open.
I've created a jsFiddle below, but I've been unable to recreate this problem. I've left the relevant code from my site below along with a link to a page in which the problem occurs. I've also left a link to another website with a structure that I've imitated on my own site. They seem to have been able to make it work, and yet I've copied the code they're using on their html and body but it behaves very differently on mine.
Could anybody tell me if I've missed something, or how they're managing to do this and I can't on mine?
My website – http://www.lucieaverillphotography.co.uk/product-category/prints/
Other website where this seems to work – https://www.etq-amsterdam.com/about/
jsFiddle
https://jsfiddle.net/75dtb1zk/40/
HTML
<header class="header">
<span id="button-one"></span>
<span id="button-two"></span>
<div class="overlay"></div>
</header>
<div class="push-menu-one"></div>
<div class="push-menu-two"></div>
<div class="content">
</div>
<footer class="footer">
</footer>
CSS
/* MAIN SITE STRUCTURE */
html {
position:relative;
height:100%;
background-color:pink;
}
body {
width:100%;
min-height:100%;
margin:0;
padding:0;
overflow-x:hidden;
display:flex;
flex-direction: column;
}
.header {
position:fixed;
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
height:55px;
z-index:10;
background-color:#fff;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.content {
flex: 1;
width:85%;
margin-top:80px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.footer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
flex-direction: column;
align-items: center;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
background-color: #efefef;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
/* PUSH MENUS */
#button-one {
display:inline-block;
width:30px;
height:30px;
margin:20px;
background-color:green;
cursor:pointer;
}
#button-two {
display:inline-block;
float:right;
width:30px;
height:30px;
margin:20px;
background-color:orange;
cursor:pointer;
}
.push-menu-one {
position:fixed;
top:0px;
left:0;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:purple;
transition: all .6s cubic-bezier(.645,.045,.355,1);
transform:translate3d(-295px,0px,0px)
}
.push-menu-two {
position:fixed;
top:0px;
right:0;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:purple;
transition: all .6s cubic-bezier(.645,.045,.355,1);
transform:translate3d(295px,0px,0px)
}
.overlay {
position:fixed;
z-index:9;
top:0px;
left:0px;
width:100%;
height:100%;
pointer-events:none;
background-color:#000000;
opacity:0;
transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}
/* TOGGLE CLASSES */
body.open-left,
body.open-right {
overflow:hidden;
}
body.open-left .header,
body.open-left .content,
body.open-left .footer {
transform:translate3d(295px,0px,0px)
}
body.open-right .header,
body.open-right .content,
body.open-right .footer {
transform:translate3d(-295px,0px,0px)
}
body.open-left .overlay,
body.open-right .overlay {
width:100%;
height:100%;
opacity:0.4;
pointer-events:auto;
}
body.open-left .push-menu-one {
transform:translate3d(0px,0px,0px)
}
body.open-right .push-menu-two {
transform:translate3d(0px,0px,0px)
}
jQuery
jQuery(document).ready(function($) {
$('#button-one').click(function() {
$('body').toggleClass('open-left');
});
$('#button-two').click(function() {
$('body').toggleClass('open-right');
});
$('.overlay').click(function() {
$('body').removeClass('open-left');
$('body').removeClass('open-right');
});
});
I'm building a site, and I have an animating image in my header. This image is a coloured bar that animates from right to left on a loop to give the impression of it infinitely moving left.
What I would like to accomplish, is to have a fade in/out effect on the left and the right side of the image, without affecting the animation of it's background image.
This is my HTML code:
<div id="hbaranim"><div id="hbarchild"></div></div>
And my current CSS (with just the animating image):
#hbaranim {
width: 100%;
height: 5px;
overflow-x: hidden;
padding-bottom: 10px;
padding-top: 10px;
}
#hbaranim #hbarchild {
position: relative;
width: 8524px;
height: 5px;
background-image: url("img/colorbartile.png");
background-repeat: repeat-x;
-webkit-animation: hbaranim_roll linear 245s infinite;
}
#-webkit-keyframes hbaranim_roll {
from { right: 0px; }
to { right: 2131px; }
}
JSFiddle
Eddit: Currently using the HTML is using two div tags, but they don't have any content in them, so using just one would probably be better (not sure how to that to be honest...)
Eddit 2: Just to clarify, the animating image is positioned over a gradient background, so just putting another gradient over the image like some of you suggested won't work in this case. It really need's to be transparent at the sides.
Eddit 3: Some of you also suggested using a CSS gradient instead of an image, but the image I use on my actual site contains some other details that would be impossible to replicate in CSS. For this example I used an image that could indeed be replicated with a CSS gradient quite easily.
Eddit 4: Updated the fiddle to include the whole header
You could use absolutely positioned pseudo elements on the parent element with gradient backgrounds to achieve this. You can also achieve the same effect with a single div.
UPDATE: Following on from edit 3 in the original question, the rainbow gradient I've used below can be replaced with an image file, the exact same principles apply.
More information on pseudo elements
More information on gradients
EXAMPLE
*{box-sizing:border:box;}
body{margin:0;}
.header{
background:radial-gradient(ellipse at center,#242424 0%,#141414 100%);
box-shadow:0px 0px 10px 3px rgba(0,0,0,.75);
height:150px;
position:relative;
}
h1{
color:#fff;
font-family:arial;
font-size:48px;
padding:25px 0 0;
margin:0;
text-align:center;
}
h2{
color:#fff;
font-family:arial;
font-size:24px;
line-height:25px;
margin:0;
text-align:center;
}
#hbaranim{
-webkit-animation:hbaranim_roll linear 10s infinite;
animation:hbaranim_roll linear 10s infinite;
background:linear-gradient(90deg,#f00 0%,#ff0 16.667%,#0f0 33.333%,#0ff 50%,#00f 66.667%,#f0f 83.333%,#f00 100%) 0 0 repeat-x;
background-size:200%;
bottom:10px;
height:5px;
position:absolute;
width:100%;
}
#hbaranim::before,#hbaranim::after{
content:"";
display:block;
height:100%;
position:absolute;
top:0;
width:25%;
z-index:1;
}
#hbaranim::before{
background:linear-gradient(90deg,rgba(20,20,20,1),rgba(20,20,20,0));
left:0;
}
#hbaranim::after{
background:linear-gradient(90deg,rgba(20,20,20,0),rgba(20,20,20,1));
right:0;
}
#-webkit-keyframes hbaranim_roll{
0%{
background-position:0 0;
}
100%{
background-position:200% 0;
}
}
#keyframes hbaranim_roll{
0%{
background-position:0 0;
}
100%{
background-position:200% 0;
}
}
<div class="header">
<h1>Name of Site</h1>
<h2>www.site.nl</h2>
<div id="hbaranim"></div>
</div>
If you're feeling adventurous, you can do this without the nested div (Fiddle) or even without the parent div (Fiddle)
The following snippet was provided as an example while awaiting Ties' confirmation that removing the child div was an option and is included below as a matter of record.
#hbaranim{
overflow:hidden;
padding:10px 0;
position:relative;
width:100%;
}
#hbaranim #hbarchild{
background-color:#000;
height:20px;
position:relative;
width:8524px;
z-index:1;
}
#hbaranim::before,#hbaranim::after{
content:"";
display:block;
height:20px;
position:absolute;
top:10px;
width:20%;
z-index:2;
}
#hbaranim::before{
background:linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0));
left:0;
}
#hbaranim::after{
background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1));
right:0;
}
<div id="hbaranim">
<div id="hbarchild"></div>
</div>
I have developed an CSS and HTML code to create some kind of accordion multi-banner. I'm not using javascript at all.
Every thing works fine,except for I issue I can not resolve:
Start point is the first image "expanded"
If you hover over some other image, the former hovered one srinks,and the current also expand. Remainig ones accomodate their witdh
PROBLEM: if you hover fast from left to rigth to the last image you come to a point where you can over a greyed on (wrapper background) and all iamges remain then collapsed.
A must should be that,always, no matter what, there's at least one image expanded to show let's say an ad,product to choose...
How can I resolve that? The reason I'm not using width:auto is that it currently doesn't make any transitions with that value set.
CODE at http://jsfiddle.net/7NR4Y/
<style type="text/css">
#wrapper div.sector {
width:50px;
height:250px;
background-position:top center;
background-repeat:no-repeat;
float:left;
max-width:300px;
opacity:0.5;
overflow:hidden;
-webkit-transition:all 1s ease-out; /* Chrome y Safari */
-o-transition:all 1s ease-out; /* Opera */
-moz-transition:all 1s ease-out; /* Mozilla Firefox */
-ms-transition:all 1s ease-out; /* Internet Explorer */
transition:all 1s ease-out; /* W3C */
}
#wrapper #first{
width:300px;
max-width:300px;
min-width:50px;
opacity:1;
}
#wrapper:hover div.sector{
width:50px;
max-width:100%;
opacity:0.5;
}
#wrapper:hover #first{
width:50px;
max-width:100%;
}
#wrapper div.sector:hover{
width:300px !important;
opacity:1;
}
</style>
<body>
<div id="wrapper" style="width:500px; height:250px; background-color:#CCC; overflow:hidden; position:relative;">
<div id="first" class="sector" title="Imagen 1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTpTF_3Pjjnsum_miN1hicvsPb-44qUm4Qban2_MfzEHevwK0_" /></div>
<div class="sector" title="Imagen 2"><img src="http://1.bp.blogspot.com/-dazqpbQnahc/UaxhFz6mwgI/AAAAAAAAGJQ/pVhtFcqEBiY/s640/Ideal-landscape.jpg" /></div>
<div class="sector" title="Imagen 3"><img src="http://2.bp.blogspot.com/-XegWV6RbUmg/UKIA7m7XgDI/AAAAAAAAAtA/6yQKXMkTjmA/s640/village-vector-the-dock-pixels-tagged-beach-landscape-512305.jpg" /></div>
<div class="sector" title="Imagen 4"><img src="http://i.telegraph.co.uk/multimedia/archive/01842/landscape-rainbow_1842437i.jpg" /></div>
<div class="sector" title="Imagen 5"><img src="http://c.dryicons.com/files/graphics_previews/sunset_landscape.jpg" /></div>
</div>
I have added the following to your CSS
a:last-child div.sector {
position: relative;
overflow: visible !important;
}
a:last-child div.sector:after {
content: "";
position: absolute;
left: 100%;
top: 0px;
height: 100%;
width: 100px;
background-color: green;
}
This creates a pseudo element after the last div of your series.
This pseudo will receive the hover state and transmit it to the element. This, way, even if the cursor goes in the zone of the wrapper that gets exposed sometimes, it will still get it selected.
I have it green so that you can se what is happening, of course in production make it transparent.
fiddle
Disregard all the previous answer !
All you need is
a:last-child div.sector {
overflow: visible !important;
}
fiddle 2
Update: The original phrasing of this question was vague so i've modified it to better express what i'm asking.
Lets say I have two divs
<div class='button'>A</div>
<div class='button green-button'>A</div>
with the following styles:
div.button {
/* define position, size, etc ...*/
color:#FBB
background-color:#F00
}
div.button.green-button{
color:#BFB
background-color:#0F0
}
In this example it was easy to shift the hue of the first button from red to green by simply changing shifting the values of color and background-color by 1 digit. If I wanted to make a blue button I could do the same shift again for a 3rd button.
However, in the case where I don't want to shift completely from one color to the next its a bit trickier.
Additionally I want to color shift everything in the div, not just the background-color and color properties. So if I were to place and image in the div the colors of the image would get shifted as well.
Is this possible in CSS? If not can you do it in Javascript?
Since everyone is posting wild guesses, I'll jump right into it.
You could achieve something using CSS filters (in your case hue-rotate)
Or the same using a CSS preprocessor like LESS.
Do you mean like this:
DEMO
HTML:
<a class="button">A</a>
CSS:
.button{
font-family:sans-serif;
font-size: 80px;
display:block;
line-height:100px;
text-align:center;
color:rgba(255,255,255,0.5);
width:100px;
height:100px;
background-color:green;
}
.button:hover{
background-color:red;
}
Or are you looking for something that figures out the color offset on it's own?
If you are there is CSS3's filter: hue-rotate(angle);
DEMO
HTML:
<a class="button">A</a>
CSS:
.button{
font-family:sans-serif;
font-size: 80px;
display:block;
line-height:100px;
text-align:center;
color:rgba(255,255,255,0.5);
width:100px;
height:100px;
background-color:green;
}
.button:hover{
-webkit-filter:hue-rotate(250deg);
-moz-filter:hue-rotate(250deg);
-ms-filter:hue-rotate(250deg);
filter:hue-rotate(250deg);
}
Yeah, you'll need multiple elements though.
HTML:
<div>
<span class="over-bg"></span>
<span>A</span>
</div>
CSS:
div, span { height:100px; width:100px; vertical-align:middle;
text-align:center; }
div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
span.over-bg { background-color:#22FF00; display:none; }
div:hover span.over-bg { display:block; }
http://jsfiddle.net/TeCvr/1/
Another approach using pseudo-elements:
HTML:
<div>
<span>A</span>
</div>
CSS:
div, span { height:100px; width:100px; vertical-align:middle;
text-align:center; }
div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
div:hover:before { display:block; content:""; position:absolute; left:0;
top:0; height:100%; width:100%; background-color:#22FF00; }
http://jsfiddle.net/TeCvr/2/
Well you could use CSS3 supported transition style rules like:
.button:hover {
background-color: #F0F0F0;
-webkit-transition: background-color 1ms linear;
-moz-transition: background-color 1ms linear;
-o-transition: background-color 1ms linear;
-ms-transition: background-color 1ms linear;
transition: background-color 1ms linear;
}
Is there any specific reason as to why you would like to achieve this..? I can't think of any application as such; unless you came across this while reverse engineering a design and couldn't find the CSS that caused this behaviour..?
Reference:
http://www.css3.info/preview/css3-transitions/
I don't know if i understand you. You can change the class of the div. For example .button to .buttongreen with diferent properties.
Without using color and background-color properties, you can still use:
background-image: linear-gradient(to bottom, #006e2e 0%,#006e2e 100%)
That's a gradient from a given color to the same color but the whole gradient is not a color in CSS.