This is what I currently have:
What I'm trying to do is remove the bottom box-shadow of the textarea (the one just above the B, I, and U) so that it ends up looking like this:
Here's the JSFiddle: http://jsfiddle.net/MgcDU/7616/
HTML:
<div class="editor span4">
<textarea class="span4"></textarea>
<ul class="format-post">
<li><b>B</b></li>
<li><i>I</i></li>
<li><u>U</u></li>
</ul>
</div>
CSS:
#import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
body {
margin: 10px;
}
textarea {
border-radius: 2px 2px 0 0;
border-bottom-color: #eee;
}
textarea:focus {
border-bottom-color: #eeeeee;
}
textarea:focus + .format-post {
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 7px rgba(82, 168, 236, 0.6);
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.format-post {
list-style: none;
background: #fafafa;
height: 35px;
border: 1px solid #cccccc;
border-top: 0;
border-radius: 0 0 2px 2px;
margin: 0;
margin-top: -10px;
}
.format-post li {
width: 35px;
height: 35px;
border-right: 1px solid #eee;
text-align: center;
line-height: 33px;
font-size: 14px;
color: #333;
cursor: pointer;
display: inline-block;
}
Please help.
I just changed the box-shadow to
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 -4px 7px rgba(82, 168, 236, 0.6);
and it worked! :)
The bottom color was still blue, so I just changed it to
border-bottom: 1px solid #999;
You can change it if needed! :)
Here is the fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/MgcDU/7617/
Pardon me, I just saw that you want the textarea to be colored, which doesn't fit for the question. You're saying in title to remove the border-bottom. But in answer you're having bottom border for both.
If you want to get the border and all animation when textarea is not active, then remove :focus and it will do the job.
And I am still very sorry, for unclear answer because I am not able to get it, which should be answered the question or the answer.
Related
My problem is my div that is called .border, the only purpose of it is to make cool border effect around the 2 headlines in the middle-left of the landingp age picture. But you can see pretty good in the screenshot, that the .border is kind of attached to the picture and stretches out. I have really no clue how to make this border perfectly centered behind the text.
.home {
margin: 3rem 6rem 3rem 6rem;
background-image: url(img/Aliens\ Cows.jpg);
background-repeat: no-repeat;
background-size: inherit;
min-height: 20rem;
box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.2), 1rem 1rem 0rem var(--clr-main);
}
.layer-over-p {
min-height: 20rem;
z-index: 1;
background: linear-gradient(90deg, rgba(32, 31, 27, 0.5), rgb(255, 234, 0, 0.6));
backdrop-filter: blur(6px);
}
.text-1 {
text-shadow: 0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: 4.5rem;
margin-left: 8rem;
}
.text-1 a {
font-size: 6rem;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: var(--ff-primary);
}
.text-2 {
text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: -1.6rem;
margin-left: 8.32rem;
}
.text-2 a {
font-size: 1.6rem;
text-decoration: none;
color: rgb(189, 189, 189);
text-transform: uppercase;
font-family: var(--ff-primary);
}
.border {
position: absolute;
z-index: 2;
}
/* ANIMATIONS = Navbar + Home *******************************************/
.border {
border-top: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
transition: border-top 0.5s ease-in-out, border-right 0.5s ease-in-out, border-bottom 0.5s ease-in-out, border-left 0.5s ease-in-out;
}
.border:hover {
border-top: 3px solid var(--clr-accent);
border-right: 3px solid var(--clr-accent);
border-bottom: 3px solid var(--clr-accent);
border-left: 3px solid var(--clr-accent);
}
<section class="home">
<div class="border">
<div class="text-1">My Work</div>
<div class="text-2">See my Creations.</div>
</div>
<div class="layer-over-p"></div>
</section>
I moved your background CSS from layer-over-p into border and wrapped both your text elements in a div with some arbitrary amount of padding. I also added #Antoine Richard's answer of simplifying the border CSS to get this result:
.home {
margin: 3rem 6rem 3rem 6rem;
background-image: url(img/Aliens\ Cows.jpg);
background-repeat: no-repeat;
background-size: inherit;
min-height: 20rem;
box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.2), 1rem 1rem 0rem var(--clr-main);
}
.layer-over-p {
min-height: 20rem;
z-index: 1;
}
.text-1 {
text-shadow: 0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.2);
}
.text-1 a {
font-size: 6rem;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: var(--ff-primary);
}
.text-2 {
text-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.2);
margin-top: -1.6rem;
margin-left: 8.32rem;
}
.text-2 a {
font-size: 1.6rem;
text-decoration: none;
color: rgb(189, 189, 189);
text-transform: uppercase;
font-family: var(--ff-primary);
}
.border {
position: absolute;
background: linear-gradient(90deg, rgba(32, 31, 27, 0.5), rgb(255, 234, 0, 0.6));
backdrop-filter: blur(6px);
z-index: 2;
overflow: wrap;
}
/* ANIMATIONS = Navbar + Home *******************************************/
.border {
border: 3px solid transparent;
transition: border-color 0.5s ease-in-out;
}
.border:hover {
border-color: var(--clr-accent);
}
<section class="home">
<div class="border">
<div style = "padding: 65px">
<div class="text-1">My Work</div>
<div class="text-2">See my Creations.</div>
</div>
</div>
</section>
This appears to keep your text items centered both within your gradient background and border, if that is what you are looking for.
For those who have maybe the same problem, just fixed it by deleting the margin of the text and adding the margin to the border. The Border how I added it in my post was including the margin of the text. That's why the border had such a big size.
As border needs some space, you need to define it even if it's not visible.
To do that, define invisible border :
border: 3px solid transparent;
Then when you need to show it :
border-color: var(--clr-accent);
And for for transition :
transition: border-color 0.5s ease-in-out;
Also, you don't need to define it for each side as they all have the same value
I have a problem on IE/Edge. I tried to solve it a couple day ago but I have no ideas. As I scrolled up and down my website, the form fields were flickering and flashing with white, grey and blue colors. I found out the issue, it was the box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.15) and border:0; . If I removed the inset attribute in box-shadow or border:0 in those input fields, then the form fields went back to the normal behavior. However, I want to keep those in the website. Not sure if there is any ways to work around this.
I attached the screenshot here
Codes:
input[type="text"],
input[type="email"],
input[type="number"] {
height: 4.2rem;
width: 100%;
max-width: 40rem;
background: $color_light_grey_1;
font-size: 1.4rem;
border: 0;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: spacing(xxs) spacing(xs);
transition: box-shadow 0.2s, border-width 0.2s;
border-left: 0 solid var(--color-primary);
&:focus {
outline: 0;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
border-left-width: 3px;
}
#include breakpoint(xs) {
font-size: 1.6rem;
padding: spacing(xxs) spacing(sm);
}
&.input--alternate {
background: $color_white;
box-shadow: $light_shadow;
&:focus {
outline: 0;
box-shadow: 0 1px 1px $color_medium_grey_1;
}
}
}
In IE a property border-collapse: collapse; gets added automatically. try adding 'border-collapse: separate; to your input class.
How do i make my checkboxes transparant? It does work with text fields and buttons but it doesnt seem to work with checkboxes.
This is the form of my code.
#checkbox {
width: 20px;
height: 20px;
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.08);
}
<div class="checkbox check-transparent">
<label>
<input type="checkbox" id="checkbox">Onthoud mij
</label>
</div>
The only thing that can be done for a regular checkbox is making it transparent by decreasing its opacity but it also lightens the tick mark inside if checked. A workaround is, having the checkbox wrapped in a div and changing the color of the checkbox when checked like shown in the snippet below:
#checkb {
width: 20px;
height: 20px;
cursor: pointer;
background: rgba(40,40,40,0.2);
color:black;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
position: relative;
left: -5px;
top: -5px;
}
#checkb:checked {
background: rgba(40,40,40,0.7);
}
.checkbox-container {
position: absolute;
display: inline-block;
margin: 20px;
width: 100px;
height: 100px;
overflow: hidden;
}
<div class="checkbox-container">
<input type="checkbox" id="checkb"/> Input
</div>
You can also (classic method that allows to restyle a checkbox crossbrowser following standards)
take input ahead and outside the label
link the label to its input via attribute for
use a pseudo on label to draw a checkbox via css and also apply size and background.
hide the checkbox
label {
display: inline-block;
}
#checkbox {
display: none;
}
label:before {
content: '';
cursor: pointer;
vertical-align: bottom;
color: black;
background-color: rgba(0, 0, 0, 0.1);
/* average checkbox styling */
line-height: 1.1em;
font-weight: bold;
text-align: center;
font-size: 20px;
height: 20px;
width: 20px;
display: inline-block;
box-shadow: inset 0 0 1px 1px rgb(153, 154, 154), inset 0 0 1px 2px white, inset 0 0 1px 2px white, inset 2px 2px 1px 1px rgb(182, 187, 192), inset -1px -1px 2px 1px rgb(182, 187, 192), inset 8px 8px 4px -4px rgb(182, 187, 192);
box-sizing: border-box;
}
:checked+label:before {
content: '\2713';
color: rgb(74, 95, 151);
}
:checked+label {
color: rgb(74, 95, 151);
}
label:hover {
color: rgb(28, 50, 125);
}
label:hover:before {
box-shadow: inset 0 0 1px 1px rgb(95, 133, 156), inset 0 0 1px 2px rgb(198, 237, 252), inset 0 0 1px 2px rgb(198, 237, 252), inset 2px 2px 1px 1px rgb(134, 203, 246), inset -1px -1px 2px 1px rgb(134, 203, 246), inset 8px 8px 4px -4px rgb(134, 203, 246);
}
<div class="checkbox check-transparent">
<input type="checkbox" id="checkbox">
<label for="checkbox"> Onthoud mij
</label>
</div>
In this button a shadow appearing and it looks like another button border there. I tried to use box-shadow property but I failed.
I used this CSS
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0px #2CBFBB;
}
Can anyone please help me?
You can achieve this effect with filter: drop-shadow and a transparent background:
body {
background: #76D7C4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>
Based on chazsolo's answer. It's possible to get shadow on button without shadow on text using absolutely positioned pseudoelement and CSS property inheritance:
body {
background: #76d7c4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
position: relative; /* new */
}
button:after {
content: "";
position: absolute;
/* Making pseudoelement the same size as container */
left: 0;
right: 0;
top: 0;
bottom: 0;
/* Inheriting border properties */
border-radius: inherit;
border: inherit;
/* Applying filter with shadow */
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>
You can also do it by combining box-shadow: ... and box-shadow: inset .... Just adjust the box-shadow so it fits your needs.
Example
body {
background: #32DBD7;
}
button {
background: transparent;
color: #fff;
border: 3px solid #fff;
border-radius: 35px;
padding: 10px 40px;
font-size: 34px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
}
<button>Learn More</button>
.test { margin-top: 2em; }
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0 darkgray;
text-decoration: none;
}
body {
background-color: #2CBFBB;
}
<div class="test">
Learn More
</div>
Could anyone show me some tutorials that make a button in css and doesn't require images? I googled it but everything involved images...
Thanks!
Um, define "button"? If you just want a basic button, you don't even need CSS, just use an HTML input or button tag...
<input type="button" value="Press me!" />
or
<button>Press me!</button>
If I understand you correctly, you want to make an arbitrary element look like a button?
Well ... just write CSS accordingly! Here's a kickoff example which makes a link look like a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3489881</title>
<style>
a.button {
display: inline-block;
padding: 0 2px;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>
<p><a class="button">link</a>
</body>
</html>
This one is kind of dull but gets the trick done!
h1 {
font-family: Arial;
}
a {
display: inline-block;
padding: 2 5px;
background: lightgray;
border: 5px outset lightgray;
cursor: default;
text-decoration:none;
color: black;
}
a:hover {
background: gray;
}
CSS:
.button{
background-color: #000;
color: #FF6600;
font: bolder 1.0em Tahoma;
border: 1px solid Yellow;
padding: 2px;
}
.button:hover{
border: 1px solid Red;
}
HTML:
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>
Try it: http://jsfiddle.net/eD9sf/
There are some awesome examples here - Pure CSS Buttons - of buttons that don't need any images but are legit. I think that you could add some gradients to some of them, but otherwise they looks exactly like the ones on Facebook, Twitter, Wordpress, etc. If you don't know much CSS, I'd suggest that you just copy one of those examples.
This is a very simple design, but looks pretty good
body {
font-family: Helvetica, sans-serif;
font-size: .8rem;
}
.button {
text-align: center;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
.button a {
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
}
/* Second button */
.button-link {
text-align: center;
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button-link:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
<div class="button">Click me</div><br/>
<a class="button-link" href="#">Click me, link only</a>
This one looks lovely, acording to me :)
.button {
color: rgba(255, 255, 255, 1);
background-color: rgba(61, 51, 119, 1);
font-weight: 500;
padding: 9px;
box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
width: 160px;
text-align: center;
transition: all .3s ease;
font-size: 15px;
border: none;
border-radius: 5px;
outline: none;
margin: auto;
font-family: "Century Gothic";
transform: scale(0.9);
}
.button:active {
box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
top: 6px;
transform: scale(0.9) translateY(3px);
}
<input class = 'button' type = 'button' value = 'Click' />