The code below works on Chrome but not on Safari. I cannot work out why, so any help would be greatly appreciated. A live demo can be found at https://jacobcxdev.me/beta/ (while the problem persists). A screen recording can be found here.
CSS:
body {
background-color: red;
}
.button {
margin: 10px;
padding: 10px 20px 10px 20px;
font-size: 4vmin;
font-weight: 100;
border-radius: 10px;
border-width: 1px;
border-color: transparent;
color: white;
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
background-clip: text;
-webkit-background-clip: text;
transition: box-shadow, background-color;
transition-duration: 0.5s;
-webkit-transition: box-shadow, background-color;
-webkit-transition-duration: 0.5s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
.button:hover {
transition: box-shadow, background-color, text-shadow, color;
transition-duration: 0.5s;
-webkit-transition: box-shadow, background-color, text-shadow, color;
-webkit-transition-duration: 0.5s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
text-shadow: none;
}
#media (hover: hover) {
.button:hover {
background-clip: text;
-webkit-background-clip: text;
background-color: black;
color: transparent;
text-shadow: none;
box-shadow: 0px 0px 10px -5px white, inset 0px 0px 200px -50px white;
}
}
<body>
<button class="button" onclick="location.href='about/'">About me</button>
</body>
<!--hover to view text-->
It looks like the color "transparent" on hover is being treated differently between browsers. You can change your CSS to pick the color you intend the text to be and this will work for Chrome and Safari.
#media (hover: hover) {
.button:hover {
background-clip: text;
-webkit-background-clip: text;
background-color: black;
color: black; /* change this color */
text-shadow: none;
box-shadow: 0px 0px 10px -5px white, inset 0px 0px 200px -50px white;
}
}
Related
I've a WhatsApp share button but I'm facing some issue with it. sharing function works well but the problem is that when the page loads(or while leaving the page), the background color of the button is displayed on the entire page for a short period of time which looks ugly. Can somebody help me to fix it? What should I change in this code so that the original theme color will be displayed while page loading instead of this WhatsApp button's color? Thanks in advance.
<style>
body{background-color:#49C34F}
.mct_whatsapp_btn {
background: #11A518;
color: white;
font-size: 16px;
padding: 6px 9px 6px 28px;
border-radius: 2px;
position: relative;
transition: ease-in all 0.3s;
moz-transition: ease-in all 0.3s;
-o-transition:ease-in all 0.3s;
-webkit-transition: ease-in all 0.3s;
text-decoration: none;
box-shadow: inset 3px 1px 1px rgba(17, 165, 24, 0.25);
border: 1px solid #028408;
}
.mct_whatsapp_btn:before {
content: '';
background: url(BACKGROUND IMAGE URL);
position:absolute;
top: 6px;
left: 7px;
width:16px;
transition: ease-in all 0.3s;
moz-transition: ease-in all 0.3s;
-o-transition:ease-in all 0.3s;
-webkit-transition: ease-in all 0.3s;
height:16px;
}
.mct_whatsapp_btn:hover {
background: #028408;
text-decoration: none;
color:white;
border: 1px solid #11A518;
box-shadow: inset 3px 1px 1px rgba(2, 132, 8, 0.25);
}
.mct_whatsapp_btn:hover:before {
transform: rotate(360deg);
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 well">
<a class="mct_whatsapp_btn" data-link="" data-text="" href="whatsapp://send?text=">Share</a>
</div>
Remove the first block of code body{background-color:#49C34F}
I'm trying to align these input forms to one line. If I take them separately - it works. Just trying to make it responsive. I want them to be in one line for desktop and move one below another for mobile.
I'm using these styles to create to make forms responsive and they work separately. But when I add other styles of my page there is a conflict and it's not working anymore
/** basic default styles **/
html { margin: 0; padding: 0; }
span.chyron { font-size: 1.2em; padding-top: 10px; }
/** main blocks **/
#container {
display: block;
max-width: 800px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 66px;
padding: 20px 15px;
background: #fff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
td {
width: 60%;
}
/** the form elements **/
#hongkiat-form { box-sizing: border-box; }
#hongkiat-form .txtinput {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 20px;
font-size: 1.55em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form .txtinput:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none;
}
#hongkiat-form input#name {
background: #fff url('images/user.png') 5px 4px no-repeat;
}
#hongkiat-form input#email {
background: #fff url('images/email.png') 5px 4px no-repeat;
}
#hongkiat-form input#website {
background: #fff url('images/website.png') 5px 4px no-repeat;
}
#hongkiat-form input#telephone {
background: #fff url('images/phone.png') 5px 4px no-repeat;
}
#hongkiat-form textarea {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 15px;
font-size: 1.5em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
height: 180px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form textarea:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
outline: 0 none;
}
#hongkiat-form #slider { width: 70%; }
#hongkiat-form #aligned {
box-sizing: border-box;
float: left;
width: 300px;
margin-right: 50px;
}
#hongkiat-form #aside {
float: left;
width: 400px;
padding: 0;
box-sizing: border-box;
}
#wrapping { width: 100%; box-sizing: border-box; }
span.radiobadge { display: block; margin-bottom: 8px; }
span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; }
/** #group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Here is a jsfiddle for it:
jsFiddle
Thank you!
try it with flexbox:
<div class="container">
<div class="form1 flex-item">
form
</div>
<div class="form2 flex-item">
form2
</div>
</div>
css:
.container{
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.flex-item{
width: 50%;
#media (max-width: 600px){
width: 100%;
}
}
EDIT: Hoping someone will see this one. I'm stuck and have tried several things since posting it, but to no avail.
I'm trying to display a textarea with a border shadow. For some weird reason, while other regular text input boxes on the page are displaying their inner shadows correctly, textareas do not show any inner shadows at all. How do I force textarea to display the shadow as the other input boxes do?
Here is the HTML I'm using.
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
Note that when I remove the entire class attribute of
class="form-control upladfieldset notes-field"
the inner border shadow appears, but then of course all my other styling is gone which is not ideal. So I also tried commenting out individual lines of CSS in those classes to see which line is causing a conflict, but the only thing that gets the inner shadow to appear is if I remove the class attribute declaration altogether.
Here is the CSS I'm using.
.form-control
{
color: #34495e;
border-color: transparent;
border: none !important;
border-bottom-width: 0px;
border-bottom: none;
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
border: none;
border-radius: 0;
padding: 0;
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
input[type=text], textarea
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
input[type=text]:focus, textarea:focus
{
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
Well... you have a lot of things going on here, but I believe I may have achieved your desired result (I'm not 100% sure I understand what you want, but I'm operating under the assumption that you want your textarea to include a border and box-shadow identical to your input field). I believe the main problem here is mainly to do with hierarchy fundamentals. Because of that, I feel like there's a few things that should be said before we tackle our actual code here. In principle, you should have more general rules towards the top of your stylesheet and more specific ones as you go down. Resets (the raw elements like textarea, input, etc.) should be at the top--or at the very least, above the classes you wish to apply to those elements.
Also, I strongly encourage you to avoid using !imporant. If you find yourself needing to use !imporant, that generally means that your real problem lies elsewhere. It shows that you're now trying to work against the natural flow of CSS to force it to cover up something else. And what happens when you need to override that rule? You're going to have to write an even more specific rule, and the whole thing can very quickly turn into a mess.
So with that said, for the sake of familiarity, I have taken your code and commented out the problematic lines and have included explanations as to why they're preventing you from achieving what you want.
.form-control
{
color: #34495e;
/*border-color: transparent; Because of this, even if you had a border, you wouldn't be able to see it (assuming you didn't override it later). */
/*border: none !important; 1. Use of !important. 2. Your border isn't showing because this is explicitly telling it not to. */
/*border-bottom-width: 0px; You're getting rid of the bottom border. */
/*border-bottom: none; You're getting rid of the bottom border. */
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
/*-webkit-box-shadow: none; Explicitly telling it not to have a box-shadow */
/* box-shadow: none; Explicitly telling it not to have a box-shadow */
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
/*border: none; Explicitly telling it not to have a border */
border-radius: 0;
padding: 0;
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
input[type=text], textarea
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
input[type=text]:focus, textarea:focus
{
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
However, here, I have re-ordered some of your lines in order to implement some of the principles I mentioned earlier. Because I don't know what you're going to use this for, I tried not to tamper with things when it was not directly necessary. I also did not delete any of your lines. Instead, I simply commented them out so you can follow along and see what I actually did. You can delete them yourself if you so wish to.
input[type=text], textarea /* Moved to the top of your stylesheet */
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1); /* Reminder: You're defining your box-shadow here */
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1); /* Reminder: You're defining your border here */
}
input[type=text]:focus, textarea:focus /* Moved to the top of your stylesheet */
{
/*box-shadow: 0 0 5px rgba(89, 89, 89, 1); No need to redefine in :focus. It will be in inherited. */
padding: 3px 0px 3px 3px; /* See: padding in .uploadfieldset (below) */
/*margin: 5px 1px 3px 0px; No need to redefine in :focus. It will be in inherited. */
/*border: 1px solid rgba(204, 204, 204, 1); No need to redefine in :focus. It will be in inherited. */
}
.form-control
{
color: #34495e;
/*border-color: transparent; This will hide previously defined border. */
/*border: none !important; This will override previously defined border. Remember, don't use !important.*/
/*border-bottom-width: 0px; This will get rid of the bottom border. */
/*border-bottom: none; This will get rid of the bottom border. */
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
/*-webkit-box-shadow: none; This will override previously defined box-shadows. */
/* box-shadow: none; This will override previously defined box-shadows. */
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
/*border: none; This will override previously defined borders. */
border-radius: 0;
padding: 0; /* This tells your text field to not have any padding. However, when you click on your textarea, the padding set by textarea:focus will override THIS. */
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
If you try either of those with this markup:
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
<input type="text">
You can see that both fields are stylized likewise. I hope this helps.
My transition outs are not working, I am using the latest Chrome Browser and when I hover over the button, the transition in is working, however the transition out just cuts right off.
My CSS
.btn{
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active{
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue{
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.blue:hover{
background-color: #6FC6FF;
transition-duration: .02s;
display: inline-block;
}
}
HTML is on this JSFiddle.
You need to put the transition on the base state not the :hover then it will transition between all states.
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.btn {
border-radius: 5px;
padding: 15px 25px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: #fff;
position: relative;
display: inline-block;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
.blue {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
transition: background-color 0.2s ease-out;
}
.blue:hover {
background-color: #6FC6FF;
display: inline-block;
}
<div id="buttons"> Blu
</div>
You are adding a transition to the :hover state, not to the actual element.
It's usually better to define a transition on the element itself, and then change properties to it's states, this way it understands that whatever the state change, it should transition from one to the other.
.btn{
transition: background-color 0.2s ease-out;
}
.btn:active{
...
}
.btn:hover{
...
}
Your just need to insert this on your btn main class
.btn{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Shadows work properly on all elements, on IE and Firefox, but not for the button element in Chrome and Safari:
http://jsfiddle.net/q8xaa/
<button class="btn-test">
<span class="btn">test</span>
</button>
.btn-test {
background-color: transparent;
border: 0;
padding: 0px;
}
.btn-test:hover .btn {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-test .btn {
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 4px 4px 0px #000;
-moz-box-shadow: 4px 4px 0px #000;
box-shadow: 4px 4px 0px #000;
background-color: #f00;
margin: 0px;
padding: 10px;
height: 40px;
display: inline-block;
}
button {
margin: 0;
padding: 0;
border: 0;
overflow: visible;
}
Any ideas on how to solve?
Example http://jsfiddle.net/H23Jy/1/
I tried forcing a zero CSS3 transformation as shown below
CSS
button span {
-webkit-transform: translate3d(0,0,0);
}
and the shadow seems to work fine also on Chrome 35.
But as you can see, in that way the button is not vertically aligned with the other buttons, so you could use -webkit-transform: translateY(-3px); instead
Result