I want to move the responsive menu to the right.
Here is an image to explain what i want
and the code:
http://www.erce.xyz/css/imports/header.css
Change:
#primary-menu-trigger,
#page-submenu-trigger {
opacity: 0;
pointer-events: none;
cursor: pointer;
font-size: 14px;
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
}
To:
#primary-menu-trigger,
#page-submenu-trigger {
opacity: 0;
pointer-events: none;
cursor: pointer;
font-size: 14px;
position: absolute;
left auto;
right 0;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
}
Hope this helps,
Tim
Add to #primary-menu-trigger next styles:
left: auto;
right: 0;
As #primary-menu-trigger already have position: absolute; it's position your button to right side.
Related
In Chrome, firefox, opera, brave ia ok, in Safari - transition no good.
In Edge, Internet Esplorer - apprearance not work, looks like the checkbox
How to repear safari's transition and apprearance in Edge/IE browsers?
.mytoggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked {
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
.mytoggle:checked:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" style="" />
Styling a checkbox directly is a pain, you could use the checkbox + label hack, in which you link a label to a checkbox, and apply the styles to the label instead of the checkbox itself:
.mytoggle {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
.mytoggle + label {
font-family: arial;
vertical-align: middle;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle + label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked + label {
background-color: #2A3542;
}
input.mytoggle:focus + label {
outline: 0;
}
.mytoggle:checked + label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" id="mycheckbox" />
<label for="mycheckbox" />
input { opacity:0}
input+label {
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input+label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input:checked+label{
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
input:checked+label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" name="abc" id="abc" checked="checked" style="" />
<label for="abc" class="mytoggle"></label>
I just added a label for input checkbox, tested in internet explorer 11. I don't have have safari browser to test it, So you can test and let know, if this answer meets your requirement.
Please try this.
$(document).ready(function(e) {
$(".ra-box").click(function(){
$(this).toggleClass('checked');
});
});
input[type=checkbox] { opacity: 0; }
.ra-box {
display: inline-block;
margin: 0;
padding: 6px;
cursor: pointer;
border-radius: 15px;
overflow: hidden;
background: #2a3542;
width: 70px;
height: 18px;
position: relative;
}
.ra-box:before {
height: 20px;
width: 20px;
background: #41cac0;
color: #41cac0;
content: 'ON';
text-indent: -40px;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50%;
}
.ra-box:after {
height: 20px;
width: 20px;
background: #7f8c9a;
color: #fff;
content: 'OFF';
position: absolute;
top: 5px;
border-radius: 50%;
text-indent: 30px;
left: 85px;
}
/* Check Box Check Change background color */
.ra-box.checked:before { right: 85px; }
.ra-box.checked:after { left: 5px;}
.ra-box.checked { background: #bdc3c7; }
.ra-box,.checked,.ra-box.checked,.ra-box:before,.ra-box:after,.ra-box.checked:before,.ra-box.checked:after {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
<br>
<br>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
I'm trying to replicate something I saw on another site, but currently my before element is hiding my text. Is there anything I can do to fix it?
This is the example:
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
Add a negative z-index to push that layer below the "parent".
body {
margin: 20px;
}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1; /* this here */
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
use z-index to see the text
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
Add z-index: -1 to :before pseudo element.
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
Simple. Add z-index:-1; in #hello:before.
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index:-1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
You can fix that by adding a z-index: -1 on the before element
body {margin: 20px;}
a {
padding: 120px;
position: relative;
color: white;
overflow: hidden;
display: inline-block;
font-size: 16px;
z-index: 1;
}
#hello:before {
background-color: #4541f1;
position: absolute;
top: 0;
content: "";
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#hello:hover::before {
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
transform: perspective(100px) translateZ(-50px);
}
Test
I'm trying to edit a link with icon to fade between colors. I'm using :before for background image which is a sprite, because I couldn't figure how to change the color of the icon using only css when it's only png file.
I found this post which might be an answer( CSS3 - Fade between 'background-position' of a sprite image) and tried to modify it to my needs but it's not working...
Here's the code and the codepen demo in action (http://codepen.io/kikibres/pen/KpjZKM):
HTML
<div id="button">Button</div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
How do I fix it so that it'll fade from one color to another...
* Update *
With some help from others (thanks, everyone!), I was able to edit the code. However, it doesn't line up in the middle like I wanted. Here's the actual link that I'm using for a website. The first code displayed was just an example to see how I can make it work. Anyway, I finally separated the icon and the text by using span, but now I'm trying to tie them together by using "+" in the css, but it's not working. Here's the codepen code: http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
As you can see from this new codepen code, if you hover over the icon, both the icon and the text work, but if you hover over the text, only the text works. How do I fix it?
You've to apply the different image styles on different DOM elements, once it's the anchor tag and the second one is the span (in my example), and then switch the opacity of the different positioned background. CodePen Link
SNIPPET
.button {
display: inline-block;
position: relative;
text-indent: 30px;
width: 36px;
height: 30px;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
text-decoration: none;
font-size: 1.5em;
transition: color 0.4s ease;
line-height:1.5em;
}
.button:hover{
color:#f68e07;
}
.button span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
background-position: 0 -29px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.button:hover span {
opacity: 1;
}
Button<span></span>
To change the color, you can incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
You have declared opacity: 0; for #button a:hover:before { ... }, that's why it doesn't work in your codepen demo.
I got it!!! Thanks everyone for their help! I was able to make it work!!!
Here's working codepen: http://codepen.io/kikibres/pen/LVKQxE
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a span {
position: relative;
display: inline-block;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button:hover a {
color: #f68e07;
}
#button:hover a span:before {
opacity: 1;
}
I've been working on a site and I've encountered a problem with transitions which only only happens in Chrome. Somehow Chrome doesn't want to do the transition which every other browser I use ( Safari, Firefox ) does.
Here's the HTML:
<div class="kategoria_box">
<div class="kategoria_box_header">
<h4>Fürdő</h4>
</div>
<div class="kategoria_box_image">
<a href="termekek/kategoriak/furdo/">
<img src="http://mondano.hu/img/furdo.jpg">
<span class="caption">
<p>Fürdőszoba</p>
</span>
</a>
</div>
</div>
and here's the CSS:
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}
Is something wrong about my code apart from being coded in my own unique style ?
You don't need the webkit- prefix anymore. You forgot to set top:0 for span.caption
http://caniuse.com/#feat=css-transitions
Here's my codepen:
http://codepen.io/dschu/pen/XbwYom
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
transition: all 600ms ease-out;
top: 0;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}
The arrows before the title are displayed using a :before. The problem only occur on Internet Explorer.
// edit : Mistake there, my styling is on p a.
Maybe is it the issue ?
So, here's the code:
.special-title {
font-size: 24px;
color: #a4a19e;
line-height: 1.2;
position: relative;
padding: 8px 0 8px 38px;
border-top: 1px solid #e2dbcf;
border-bottom: 1px solid #e2dbcf;
margin-top: 49px;
margin-bottom: 25px; }
.special-title:before {
content: url('../img/general-title-decoration.svg?1369571463');
position: absolute;
width: 28px;
left: 0;
top: 23px;
margin-top: -13px; }
and for the button:
.btn-call-to-action a {
background: #8e8287;
color: #f5f3e2;
padding: 2px 60px 2px 10px;
height: 35px;
line-height: 40px;
margin-top: 6px;
display: inline-block;
position: relative;
border-radius: 2px;
height: 40px;
white-space: nowrap;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.btn-call-to-action a:hover:after {
-webkit-transform: translatex(6px);
-moz-transform: translatex(6px);
-o-transform: translatex(6px);
-ms-transform: translatex(6px);
transform: translatex(6px); }
.btn-call-to-action a:hover {
background: #6f6469;
border-bottom: none; }
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
and here's the live site: http://aurelieremia.be/tfa/
In .special-title:before, since you're using absolute positioning, remove
margin-top:-13px;
and just use
top:10px;
instead. Then, declare a height as well as a width.
see http://jsfiddle.net/6TdB6/