i have a menu hamburger "icon" for the mobile breakpoint. i have it set up as 3 lines and i want them to transition to an X (that will close the menu).
i want the top bar to go 45 degrees, the middle bar to disappear, and the bottom bar to go 45 degrees the other way. then the top and bottom bars will shift up and create an X
AS OF NOW....it only animates for as long as i hold my mouse down. Why is this so? I just need the animation to complete itself on click.
html:
<a class="navbar-item-link" "javascript:void(0)" >
<div class="hamburger-icon"><span></span></div>
</a>
stylus:
.hamburger-icon
&:before, &.hamburger-icon span, &:after
content ''
display block
height 2px
width 20px
background-size 100%
background rgba(255,255,255,0.5)
margin 6px auto 7px auto
transition all 0.2s linear
&:active
&.hamburger-icon span
background-color transparent
&:before
transform rotate(45deg)
top -10px
height 2px
background rgba(255,255,255,0.5)
width 30px
&:after
transform rotate(-45deg)
bottom -10px
height 2px
background rgba(255,255,255,0.5)
width 30px
The :active acts like a mouse down. When you'll release the click, the animation will stop.
You have a few solutions using JS or CSS.
In CSS, you could use the keyframes to be sure your animation will be finished.
In JS, you could use a click event which could animate your icon with JS animations, or add a class which would contain your clicked properties.
The following example is using a preprocessor. LESS or SASS would have the same syntax here:
.hamburger-icon {
/* .hamburger-icon styles */
&.active {
span {
background-color: transparent;
}
&:before {
transform: rotate(45deg);
top: -10px;
height: 2px;
background: rgba(255,255,255,0.5);
width: 30px;
}
&:after {
transform: rotate(-45deg);
bottom: -10px;
height: 2px;
background: rgba(255,255,255,0.5);
width: 30px;
}
}
}
Then in jQuery
$('.hamburger-icon').on('click', function(){
$(this).addClass('active');
});
Hope you got the point.
Good Luck'
Related
I want to create this dialog window in CSS:
The only way I managed to come close to this was to copy the dialog window several times, tilt it with transform: rotate(..) and play a bit with z-indexes.
Could this be achieved with borders or box shadows without having to copy the original dialog window? It doesn't have to literally be there three times, of course. It can just be an illusion.
I don't think you'd be able to do it with just borders, though you could use pseudo-elements to avoid actually having to copy the element and some Z transforms to achieve this:
#modal, #modal:before, #modal:after{
width: 500px;
height: 300px;
background: whitesmoke;
border-radius: 10px;
box-shadow: 0 0 5px 5px #eee;
content: " ";
position: absolute;
}
#modal:before{
transform: rotate(-3deg) translateZ(-1px);
}
#modal:after{
transform: rotate(-6deg) translateZ(-2px);
}
#modal{
transform-style: preserve-3d;
position: relative;
margin: 50px auto;
}
<div id='modal'></div>
This basically creates two pseudo-copies of your modal and pushes them behind the original with slightly different rotation.
I am not that familiar with CSS animations. My client want to achieve the following result when hovering the contact button:
so to be clear:
the square's move from left to right and vice versa
when the square moves, the line underneath it changes color
the top image it the start state, the middle is during the effect (50%) and the bottom image is the end stage.
Is this achievable with only CSS or do I need JS as well?
How would I approach this?
I created a quick and dirty JSFiddle here: https://jsfiddle.net/x0b397pb/
As you can see, it is possible with just CSS. In this example I used pseudo elements (::before and ::after) to create most of the elements.
You mentioned "Im not that familiar with CSS animations". For this I used transitions.
transition: left 1000ms, right 1000ms, box-shadow 1000ms;
Each comma separated element is a value that will transition between 2 points. This transition happens on a change of the div, this can be on a hover, but also when applying another div (Through JS).
To created the effect of the lines gradually shifting in color I used another element that slides on top of the original two lines. The new lines originally have 0 width, but on hover they gain 100% width. With a transition transition: width 1000ms; this happens gradually.
Try not to use my code as your final example, as it is somewhat ugly. But I hope it gets the point across.
Here is a small demonstration of css transition:
Consider this HTML:
<div class="container">
<div class="box"></div>
</div>
With this CSS:
.container {
position: relative;
width: 400px;
height: 400px;
border: solid 1px black;
}
.box {
position: absolute;
width: 40px;
height: 40px;
top: 10px;
left: 10px;
background-color: red;
transition: all 1s;
}
.container:hover {
border-color: blue;
.box {
top: 200px;
left: 200px;
width: 160px;
height: 160px;
background-color: blue;
}
}
Or, check it on JsFiddle: https://jsfiddle.net/ronency/75ozjq3s/
.box {
background: linear-gradient(80deg, #f3efef, #90009f, #01060d);
background-size: 600% 600%;
animation: AnimationName 29s ease infinite;
}
#keyframes AnimationName {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
I have a div 700px x 300px and a background picture 700px x 300px. The div height can be increased to 600px. Div sizes are changed with jQuery.
I have a next CSS style for div:
#myDiv {
position:relative;
overflow:visible;
background:transparent url(../images/background.jpg) bottom no-repeat;
border:1px solid #000;
-webkit-box-shadow:0 0 10px 2px #000;
-moz-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
box-shadow:0 0 10px 2px #000;
margin:10px;}
If div height is increased, the background should be mirrorly reflected by vertical. I've added the next CSS style in my CSS file:
#myDiv:before {
background:url(../images/background.jpg);
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);}
But it does not work (I try different browsers). May I miss something?
I think you miss few important styles in the :before element. You have to specify content, dimensions and since :before has display default inline, you have to make it block.
#myDiv:before {
content: "";
display: block;
height: 300px;
width: 700px;
background: url(http://lorempixel.com/700/300/);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
The whole demo: http://codepen.io/canescz/pen/zHCjA
Note that the :before element pushes whole content down so you might want to make the :before as position:absolute. But I think if you play with it, you will figure out what you need.
By the way only -webkit prefix should be enough since other browsers don't use prefixes anymore for transform. Check http://caniuse.com/#search=translate to match your desired browser support.
Im looking for a way to recreate this button with CSS only.
I know about the triangle technique and I also know how to add a border to it, but unfortunately I don't know any way to recreate this button (without adding additional wrappers or using images).
The buttons I need this style on are <input["submit"]> and ordinary <a>'s.
With one element, you could do it using gradients and skewed pseudo-elements for a link:
demo
(you could actually do it using just gradients, but then a hover action won't be triggered on hover on the arrow shape itself, but on hover on the rectangular element containing it)
HTML:
<a class='boo' href='#'>click me</a>
Relevant CSS:
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background:
linear-gradient(60deg, dodgerblue 50%, transparent 50%) 100% 0,
linear-gradient(-60deg, transparent 50%, dodgerblue 50%) 100% 100%,
linear-gradient(-90deg, transparent 1em, dodgerblue 1em);
background-repeat: no-repeat;
background-size: 1em 50%, 1em 50%, 100% 100%;
}
.boo:before, .boo:after {
position: absolute;
right: -.2em;
width: .5em; height: 50%;
background: dodgerblue;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
EDIT:
If your background is a solid color, not an image or a gradient, you could do it in a much simpler way, without using gradients (which means that this second method also has the advantage of working in IE9).
demo #2
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background: lightblue;
}
.boo:before, .boo:after {
position: absolute;
right: -.3em;
width: .5em; height: 50%;
box-shadow: -.2em 0 0 white;
background: inherit;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
You should use a background image. Create a transparent png containing the arrow.
You would need two elements, the outer would contain the background image, the inner would contain the text, and a background color which is the same as the one on the arrow. Alternatively, you could use a second background image instead of a background color, for example if your button is not just a flat color.
The trick is to align the box containing the text with the background image.
If your arrow is 20px tall, your inner box could be e.g. 16px plus 2px padding on each side (search for box model if you would like to understand this better).
The outer element can have a right-margin set to the approximate width of the arrow image.
I hope this makes sense. The general technique is called sliding doors. I suggest reading the entire article if you have the time.
Why does not the following fiddle work properly (text disappears) only in firefox?
What I am trying to do in the below fiddle is,
I dont like browser's file upload control and I am creating CSS for it to look like a button. The file upload control is enclosed in a div and is hidden via opacity property. CSS is added to the outer div to make it look like a button.
Markup and CSS
HTML:
<button id="Ctrl" class="button" type="button">Query</button>
<div id="file" class="file-label appletButton">
New File
<input id="FileInput" class="file-input" type="file" name="fileinput" multiple></div>
CSS
.file-input {
width: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';
-moz-transform: translate(-300px, 0) scale(4);
-o-transform: 'translate(250px, -50px) scale(1)';
}
.file-label {
padding: 5px;
position: relative;
display: inline-block;
overflow: hidden;
}
.appletButton {
background: linear-gradient(to bottom, #8ABAFE 0%, #5788C7 100%) repeat scroll 0 0 transparent;
border: 1px solid #31537F;
color: #F5F5F5;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}
http://jsfiddle.net/6ZuPM/7/
In the above fiddle, first click on "Query" button. Then press TAB key. The "New File" text disappears. But you will still be able to invoke browse window by clicking the blue button. WHY THE TEXT DISAPPEARED?
When you hit tab, the browser puts focus on the file input, since that's the next thing in the tab order.
When something is focused, browsers try to scroll it into view. So in this case the <div class="file-label"> is scrolled however far it needs to be scrolled to bring the file input into view, which scrolls the text out of view.
About position:relative and position:absolute :
position:relative;
Keeps your element in the flow of the page, you can even specify floats on it. It takes its origin in its parent.
position:absolute;
Removes your element from the flow of the page. It takes its origin in the body element, unless it is nested in position:relative element (your example) , then the position:absolute element takes its origin in its parent.