I am attempting to make a box that displays text when you hover over it.
this is the code I have currently:
<style>
/* WHILE HOVERED */
.one:hover {
box-shadow: 0 15px 30px black;
background: #00576f;
background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
}
/* WHILE BEING CLICKED */
.one:active { }
.other {
width: 200px;
height: 200px;
line-height: 100px;
color: white;
text-decoration: none;
font-size: 50px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
margin-top: 10px auto;
/* BACKGROUND GRADIENTS */
background: #00485c;
</style>
<body>
<center><div class="other one"/div></center>
</body>
I know that there is probably a simpler way to do what I have so far, but I only need to know how to make text appear in the square when you hover over it.
thanks.
Well you can do this in pure CSS, but JavaScript may be the better option if you're unable to change the HTML markup. At any rate:
.one:hover:after {
content: "My text here!"
}
Related
I am making a webpage with header menu,
and content has gradient text somewhere.
I just found out that the text is visible through the header menu, it seems the text somehow makes the header menu transparent.
the text is visible through the menu
supposed to look like:
Is this normal? Is there any other way to make gradient text without affecting other elements?
css of the header and the text looks like this by the way:
#header {
position: sticky;
top: 0;
background-color: black;
height: 100px;
align-items: center;
padding: 10px 10px 10px 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.content_right_text {
font-size: 60px;
font-weight: 700;
background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 10%, #ffffff 50%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
}
Try adding a z-index to your header element so that it stays on top even while scrolling as the position is set to sticky.
#header {
position: sticky;
.
.
.
z-index: 1;
}
What i want to achive is button on hover - background turn to white, text turn to transparent, keep in mind that body is filled with some image i my case, run my snippet.
In other words i want make a hole in button background with shape of given text and transparency
button {
padding:10px;
border:solid 5px #fff;
color: #fff;
background: none;
font-weight: bold;
font-size:2em;
}
button:hover {
color: transparent;
background: #fff;
}
body {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1280px-Mallard2.jpg");
background-size: 200px;
background-repeat: no-repeat;
}
<button>BUTTON</button>
When you set mix-blend-mode to hard-light, gray becomes transparent.
(Not supported by IE or Edge)
You can use it this way:
button {
padding:10px;
border:solid 5px #fff;
color: #fff;
background: none;
font-weight: bold;
font-size:2em;
}
button:hover {
color: gray;
background-color: white;
mix-blend-mode: hard-light;
}
body {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1280px-Mallard2.jpg");
background-size: 200px;
background-repeat: no-repeat;
}
<button>BUTTON</button>
You can use the CSS attribute background-clip: text;
A full tutorial can be found here: https://css-tricks.com/how-to-do-knockout-text/
I am making the select2 combo box, I want to remove blue color hover style, but I cannot remove it, does not exit. How can I do it? Please give me a solution, thanks
EXAMPLE
Js
jQuery(document).ready(function($){
$('select').select2({width:100});
$('b[role="presentation"]').hide();
$('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>');
});
view
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
CSS
.select2-dropdown.select2-dropdown--below{
width: 148px !important;
}
.select2-container--default .select2-selection--single{
padding:6px;
height: 37px;
width: 148px;
font-size: 1.2em;
position: relative;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));
background-image: -moz-linear-gradient(top, #424242, #030303);
background-image: -ms-linear-gradient(top, #424242, #030303);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));
background-image: -webkit-linear-gradient(top, #424242, #030303);
background-image: -o-linear-gradient(top, #424242, #030303);
background-image: linear-gradient(#424242, #030303);
width: 40px;
color: #fff;
font-size: 1.3em;
padding: 4px 12px;
height: 27px;
position: absolute;
top: 0px;
right: 0px;
width: 20px;
}
Add the following to your CSS code since the code causing the blue hover effect is in a minified css file and is hard to edit:
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: lightgreen !important;
color: white;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: inherit;
}
Here is your updated JSFiddle
If you simply would like to remove the blue background from the element on :hover you can add this line of of code:
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: inherit;
color: inherit;
}
DEMO
Used to this css for hover and default background-color
html .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color: green;}
html .select2-container--default .select2-results__option--highlighted[aria-selected]{color:#000;}
html .select2-container--default .select2-results__option[aria-selected=true]{background-color:red;}
Demo
add in style
.select2-container--default .select2-results__option[aria-selected="true"]
{
background:#fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]
{
background:green;
color:#fff;
}
I am trying to get a certain effect on a header for a mockup. It has white glow almost not noticeable. You will see it in this picture i provide behind the title and sub title. How can i get that glow effect with css? I do have a header with the entire thing but is that a good idea to use an image for an entire header? Also i want those two lines near the subtitle. Is it possible to code those lines? And last, the button "order now", will that be possible to make with css or should i just use an image of that and link it?
mockup
jsfiddle - http://jsfiddle.net/ezdr3xdg/1/ [what i currently have]
<header>
<h1>Taffies Cupcakes</h1>
<h2>Fresh and tasty</h2>
</header>
body{
background-color:#e7d2c9;
}
header h1{
font-family:georgia;
font-size:46px;
color:#784f3d;
text-align:center;
margin-top:50px;
}
header h2{
font-family:segoe script;
font-size:32px;
color:#846a5f;
text-align:center;
}
All of this is possible to do in CSS 3, I wouldn't recommend it though. Using an image for the button and the header is the best idea if you want it to look the same in all browsers. If you want to do it in CSS anyway try this:
HTML:
<header>
<div class="shadow"></div>
<h1>Taffies Cupcakes</h1>
<h2><div class="line"></div>Fresh and tasty<div class="line"></div></h2>
</header>
CSS:
header > .shadow {
width: 0px;
height: 0px;
margin: 0px 50%;
box-shadow: 0px 0px 200px 100px white;
}
header h2 > .line {
height: 1px;
width: 100px;
margin: 5px 20px;
background-color: #846a5f;
display: inline-block;
vertical-align: middle;
}
As the other answers have mentioned, radial-gradient is probably the way to go here. Just apply it to the header element instead of using my version with box-shadow (which might be a little hacky to some).
Update for the button:
HTML:
<button class="special"><div class="icon"></div><div class="headline">ORDER NOW</div><div class="description">We deliver in 24 hours</div></button>
CSS:
button.special {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #784f3d), color-stop(1, #846a5f) );
background:-moz-linear-gradient( center top, #784f3d 5%, #846a5f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#784f3d', endColorstr='#846a5f');
background-color:#784f3d;
color: #e7d2c9;
text-align: left;
border: 0;
outline: 0;
border-radius: 5px;
height: 42px;
}
button.special > .icon {
width: 27px;
height: 27px;
/*background-image: url('triangle-button.png')*/
position: absolute;
margin: 5px;
}
button.special > .headline {
margin-left: 42px;
font-size: 18px;
}
button.special > .description {
margin-left: 42px;
font-size: 12px;
}
http://jsfiddle.net/ezdr3xdg/17/
Use CSS radial-gradient()
DEMO 1:
body {
height: 100vh;
background-color: #e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 50%);
}
DEMO 2:
body{
height:100vh;
background-color:#e7d2c9;
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #fff 0%, #e7d2c9 100%);
}
DEMO 3:
body {
height: 100vh;
background-color: #e7d2c9;
position:relative;
}
body:after {
content: '';
position: absolute;
left: 50%;
top: -150px;
margin-left: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
z-index:-1;
background: rgba(255, 255, 255, 0.42);
box-shadow: 0 0 40px 64px rgba(255, 255, 255, 0.42);
}
I have update your jsfiddle with a starting template of sorts. Its CSS# gradients and border-radius. http://jsfiddle.net/ezdr3xdg/7/
the button:
<div id="order_now">
<div id="triangle-right"></div>
<div id="text">
ORDER NOW
<div id="sub_order">we deliver in 24hours</div>
</div>
</div>
CSS:
The Button:
#order_now{
background: linear-gradient(#846a5f, brown);
width: 200px;
border-radius: 5px;
padding: 5px;
color: white;
font-size: 12pt;
font-weight: bold;
}
#sub_order{
font-size: 10pt;
font-style: italic;
}
#triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid white;
border-bottom: 25px solid transparent;
display: inline-block;
}
#text{
display: inline-block;
}
The Background:
body{
background:linear-gradient(to right, red, blue, red);
}
this should be enough to get you started.
I have a box container as shown bellow
Which i want to code in a modular way so that i can use the html css structure to build any size box in width and height. I will be using Bootstrap to code the website
Which is the best way to get started.
Let's say that gradient on the top is named gradient.png
.box {
border: 1px solid gray;
border-radius: 3px;
background: white url("gradient.png") ;
background-repeat: repeat-y;
padding-top: 20px;
}
I think it's mostly self explanatory; the repeat-y just makes it repeat accross the top but not throughout the rest of the image. The padding makes it so the text doesn't start at the top. See how it works for you.
By the way, is that from the Apple discusion page?
I tried to keep this as similar to your example as I could with straight CSS. Given this approach, you won't find immediate support in IE8 and lower.
The markup for the box itself is pretty simple:
<div id="modal">
<header><h1>Something Here</h1></header>
<section>
<p>Pellentesque habitant morbi tristique...</p>
</section>
</div>
The CSS for this markup can be found below the preview image below.
Demo: http://jsbin.com/ogesuf/5/edit
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#modal {
width: 600px;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
overflow: hidden;
}
#modal header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
#modal h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #888;
text-align: center;
}
#modal section {
padding: 10px 30px;
font-size: 12px;
line-height: 175%;
color: #333;
}
</style>
If you're willing to try jQuery ui you can simply use dialog to achieve what you want here is the link with more info.
http://jqueryui.com/demos/dialog/#default