I am brand new to CSS and only know very basic things. I found this code on the interwebs and it works to create a button but I will be using an image inside the button and when hovered I will have a color over the image and want to display text, how do I get it to say LEARN MORE once it is hovered? one more thing. how do I change the color when hovered? is there a way to change it using html color codes instead of the rgba? I have no idea how to use the rgba and want the color to change to #f58020 thanks and hopefully that makes sense
.circle {
display:block;
text-decoration:none;
border-radius:100%;
background:#12809b;
width:100px;
height: 100px;
color:#fff;
text-align:center;
font:bold 16px/100px Arial, sans-serif;
text-transform:uppercase;
transition: all 0.4s ease-in-out;
box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover {
box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}
please watch this link DEMO
HTML
<button class="circle" ><span>new</span></button>
CSS
span{
display: none;
}
.circle {
display:block;
text-decoration:none;
border-radius:100%;
background:#12809b;
width:100px;
height: 100px;
color:#fff;
text-align:center;
font:bold 16px/100px Arial, sans-serif;
text-transform:uppercase;
transition: all 0.4s ease-in-out;
box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover{
box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}
.circle:hover span{
display: block;
}
use
MARK UP
<div class="circle"><span>Learn</span></div>
or
<button class="circle"><span>Learn</span></button>
CSS
span{
display: none;
}
.circle:hover span{
display:block;
}
FIDDLE DEMO
You don't need to add non semantic html elements. Add those styles to your code to get the hidden text:
.circle {color: transparent}
.circle:hover {color: white}
<a class="circle">Learn<br>More</a>
Then, add a padding top to .circle, reduce height and change line-height:
.circle {height: 65px; padding-top: 35px; font:bold 16px/100% Arial, sans-serif;}
See example: jsfiddle
In your css reference you have:
.circle {font:bold 16px/100px Arial, sans-serif;}
The 100px refers to line-height, 100px is a lot. I suggest you to use 100% percentage for this case.
The <br> is for forcing a line break. You can remove if you want, but then you'll have to add more padding top, and reduce height.
you can use hover property to display content before or after
<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<b>Note:</b> For the content property to work in IE8, a DOCTYPE must be declared.
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a.hovertext {
position: relative;
width: 500px;
text-decoration: none !important;
text-align: center;
}
a.hovertext:after {
content: attr(title);
position: absolute;
left: 0;
bottom: 0;
padding: 0.5em 20px;
width: 460px;
background: rgba(0,0,0,0.8);
text-decoration: none !important;
color: #fff;
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
a.hovertext:hover:after, a.hovertext:focus:after {
opacity: 1.0;
}
</style>
</head>
<body>
<p><a class="hovertext" href="#" title="LEARN MORE"><img id="a" src="buttonImage.png" width="500" height="309" border="0" alt=""></a></p>
</body>
</html>
Related
I know i can create in CSS a lot of round corners, but i have never created something like this
I don't need styling for fonts, and heading only for left corner, it is possible to make it like this?
I know i can create moon like this, maybe this is the way?
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
I think it has to be before pseudo class?
Any idea how to make it like my picture?
i guess you want something like this
jsfiddle
just create and element with :before, and make it oval.
to make it oval you need to set border-radius:100%; and the element should have a rectangle form... not a square form.
and then some minor position adjustments.
for this solution to work the background-color of the container where your element is situated ( in this case body ) needs to be the same as the background-color of the :before element
body {
background:#fff;
}
h2 {
color:#fff;
font-size:20px;
padding:10px;
width:200px;
text-align:right;
background:blue;
text-transform:uppercase;
position:relative;
}
h2:before {
position:absolute;
content:"";
background:#fff;
height:120%;
width:50px;
border-radius: 100%;
left:-25px;
top:-10%;
}
<h2>
Predictions
</h2>
You can use radial-gradient for background property of your element without any extra elements or pseudo-elements:
.shape {
width: 200px;
height: 50px;
padding: 0 20px;
line-height: 50px;
color: #ffffff;
text-align: right;
text-transform: uppercase;
font-size: 20px;
background: radial-gradient(circle 26px at 0% 50%, transparent, transparent 25px, #0000ff);
}
<div class="shape">Predictions</div>
More over, you can play with parameters of radial-gradient to get any required arc:
.shape {
width: 200px;
height: 50px;
padding: 0 20px;
line-height: 50px;
color: #ffffff;
text-align: right;
text-transform: uppercase;
font-size: 20px;
background: radial-gradient(circle 41px at -13% 50%, transparent, transparent 40px, #0000ff);
}
<div class="shape">Predictions</div>
Please look at the jsFiddle.
I want to animate color from one to another list whenever I click any list icon see in below image
.days-cal li {
color: #d5d1e6;
height: 36px;
width: 36px;
display: inline-block;
border-radius: 19px;
margin: 0 5px;
padding-top: 06px;
-webkit-transition: 0.5s linear;
-moz-transition: 0.5s linear;
-o-transition: 0.5s linear;
transition: 0.5s linear;
}
.days-cal li.active {
background: #4B916C;
text-align: center;
margin: 0px 0;
padding-top: 6px;
}
<div class="expand-view inven-l">
<div class="item">
<ul class="days-cal">
<li ng-class="{'active':weekOf==1}" ng-click="weekSelect(1)">Sun</li>
<li ng-class="{'active':weekOf==2}" ng-click="weekSelect(2)">Mon</li>
<li ng-class="{'active':weekOf==3}" ng-click="weekSelect(3)">Tue</li>
<li ng-class="{'active':weekOf==4}" ng-click="weekSelect(4)">Wed</li>
<li ng-class="{'active':weekOf==5}" ng-click="weekSelect(5)">Thu</li>
<li ng-class="{'active':weekOf==6}" ng-click="weekSelect(6)">Fri</li>
<li ng-class="{'active':weekOf==7}" ng-click="weekSelect(7)">Sat</li>
</ul>
</div>
</div>
Using Dummy Element and Transform:
One way to achieve this would be to use a dummy element inside the ul.days-cal which creates the circle and then translate it (using CSS transform) based on the index of the element that is clicked.
$('li').on('click', function() {
var translateX = ($(this).index()) * 46; /* width + 2 * margin */
$('ul.days-cal .circle').css('transform', 'translateX(' + translateX + 'px)');
});
.days-cal li {
color: #d5d1e6;
height: 36px;
width: 36px;
float: left;
line-height: 36px;
margin: 0 5px;
padding-top: 6px;
transition: 0.5s linear;
text-align: center;
}
.days-cal {
position: relative;
padding: 0;
list-style: none;
}
.days-cal li.circle {
position: absolute;
content: '';
height: 36px;
width: 36px;
top: 6px;
left: 0px;
padding: 0px;
margin: 0px 5px;
background: #4B916C;
border-radius: 50%;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand-view inven-l">
<div class="item">
<ul class="days-cal">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
<li class='circle'></li>
</ul>
</div>
</div>
Using Radial Gradients: (no extra element required)
Another way to achieve this without using any extra dummy elements would be to use radial gradients as background image for the ul.days-cal and then adjust the background-position of the gradient depending on the index of the element that is clicked.
The disadvantage of using radial gradient is that it won't work in IE9-.
$('li').on('click', function() {
var translateX = ($(this).index()) * 46; /* width + 2 * margin */
$('ul.days-cal').css('background-position', translateX + 'px 0px');
});
.days-cal li {
color: #d5d1e6;
height: 36px;
width: 36px;
float: left;
line-height: 36px;
margin: 0 5px;
padding-top: 6px;
transition: 0.5s linear;
text-align: center;
}
.days-cal {
position: relative;
padding: 0;
height: 42px;
list-style: none;
background-image: radial-gradient(36px 36px at 24px 24px, #4B916C 48.5%, transparent 51%);
background-position: 0px 0px;
transition: all 0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand-view inven-l">
<div class="item">
<ul class="days-cal">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
</div>
</div>
Here is a snippet to show how CSS could do this. I use here tabindex, but i also could use form element to mimic whatever the missing function does with ng-class when you click on your items (could not guess it but waiting for you to update question so i can update answser :) ).
The CSS part to mind is the nth-child(x) and the selector ~ so you can update coordonates of a pseudo produced by the last item.
/// WELL your function is missing, so i do not link snippet to any library ///
// IN the CSS part, replace occurance of :focus by .active //
.item {
font-size:16px;
background:rgba(255,255,255,0.1);
overflow:hidden;
position:relative;
margin:1em;
}
.days-cal li {
color: #d5d1e6;
text-align:center;
line-height:36px;
height: 36px;
width: 36px;
display: inline-block;
border-radius: 19px;
margin: 0 5px;
}
/* replace occurance of :focus by .active */
.days-cal li:nth-child(7):focus:before {
left:345px;
}
.days-cal li:nth-child(6):focus ~ li:last-of-type:before {
left:295px;
}
.days-cal li:nth-child(5):focus ~ li:last-of-type:before {
left:245px;
}
.days-cal li:nth-child(4):focus ~ li:last-of-type:before {
left:195px;
}
.days-cal li:nth-child(3):focus ~ li:last-of-type:before {
left:145px;
}
.days-cal li:nth-child(2):focus ~ li:last-of-type:before {
left:95px;
}
.days-cal li:nth-child(1):focus ~ li:last-of-type:before {
left:45px;
}
li:last-of-type:before {
content:'';
height:36px;
width:36px;
display:inline-block;
background: #4B916C;
position:absolute;
left:-50px;
transition:left 0.5s;
z-index:-1;
border-radius:50%;
}
li:focus {
animation:dripple 0.5s
}
#keyframes dripple {
0 , 50%{
box-shadow:0 0 0 rgba(0,0,0,0.5) , inset 0 0 0 0 rgba(255,255,255,0.3) , inset 0 0 0 0 rgba(0,0,0,0.5), inset 0 0 0 0 rgba(255,255,255,0.3), inset 0 0 0 0 rgba(0,0,0,0.5);
}
20% {
box-shadow:0 0 3px rgba(0,0,0,0.5), inset 0 0 3px 0 rgba(255,255,255,0.3), inset 0 0 3px 3px rgba(0,0,0,0.5), inset 0 0 2px 9px rgba(255,255,255,0.3), inset 0 0 2px 11px rgba(0,0,0,0.5);
}
}
body {
background:#352B58;
}
<div class="expand-view inven-l">
<div class="item">
<!-- DISCLAIMER/ tabindex is used to show that CSS can achieve this, but we need to relay on your js function to fully adapt to your code -->
<ul class="days-cal" ng-controller="MainController as vc">
<li tabindex="0" ng-class="{'active':weekOf==1}" ng-click="weekSelect(1)">Sun</li>
<li tabindex="0" ng-class="{'active':weekOf==2}" ng-click="weekSelect(2)">Mon</li>
<li tabindex="0" ng-class="{'active':weekOf==3}" ng-click="weekSelect(3)">Tue</li>
<li tabindex="0" ng-class="{'active':weekOf==4}" ng-click="weekSelect(4)">Wed</li>
<li tabindex="0" ng-class="{'active':weekOf==5}" ng-click="weekSelect(5)">Thu</li>
<li tabindex="0" ng-class="{'active':weekOf==6}" ng-click="weekSelect(6)">Fri</li>
<li tabindex="0" ng-class="{'active':weekOf==7}" ng-click="weekSelect(7)">Sat</li>
</ul>
</div>
</div>
codepen to play with or fork
I'm trying to create an effect with list items in an unordered list.
Basically, anytime one hovers over the list, the size adjusts 2px in padding. While this properly it is also effecting the overall dimensions of the list item, thus pushing other list elements to the right and pushing the div beaneath down 2px. Anyone know of a way to remedy this issue?
All I want the list item to do during a hover is to increase padding by 2px without effecting any other elements around it.
You can find the code on jsfiddle here as well as below:
HTML
<div id="info">
<ul class="projects">
<li class="site wmhr">$
<p>What's My Hourly Rate</p>
</li>
<li class="site proud">P
<p>PROUD</p>
</li>
<li class="site mdy">M
<p>Manda Dougherty Yoga</p>
</li>
<li class="site rr">R
<p>Responsive Resume</p>
</li>
<li class="site dp">D
<p>designpairs (in progress)</p>
</li>
</ul>
</div>
CSS
.projects {
margin: 0;
padding: 0 0 50px 0;
}
.projects li {
display: inline-block;
list-style: none;
width: 70px;
height: 70px;
margin: 50px 20px 20px 0;
border: 4px solid #555;
border-radius: 50%;
font-size: 2em;
text-align: center;
line-height: 70px;
background: #414141;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.projects p {
font-size: .850rem;
line-height: 1.500em;
}
.projects li:hover {
padding: 2px;
display: inline-block;
list-style: none;
border-radius: 50%;
line-height: 71px;
}
.projects li a {
font-family:'Montserrat', sans-serif;
color: #fff;
text-decoration: none;
}
.wmhr:hover {
background: #66CC6E;
border: 4px solid #57ac5e;
}
.proud:hover {
background: #5882c2;
border: 4px solid #4b6da2;
}
.mdy:hover {
background: #fec601;
border: 4px solid #ddad03;
}
.rr:hover {
background: #797b96;
border: 4px solid #606176;
}
.dp:hover {
background: #475161;
border: 4px solid #38404d;
}
If you don't want the item to move, then you have to counteract the padding with a reduction in some other dimension or change the layout structure to not use inline layout.
Here's a version of your jsFiddle that uses a reduction in the margin to counteract the increase in the padding. The hovered item gets larger, but the other items don't move.
.projects li:hover {
padding: 2px;
display: inline-block;
list-style: none;
border-radius: 50%;
line-height: 71px;
margin: 48px 18px 18px 0;
}
Note, I also changed the default left margin to be 2px so I could reduce it to 0 here as I hate using negative margins (they sometimes cause objects to overlap which can introduce unexpected behaviors).
http://jsfiddle.net/jfriend00/6jjcg/
I would use a CSS transform property rather than adding padding and adjusting around it.
.projects li:hover {
transform: scale3d(1.2,1.2,1);
}
Using scale3d rather than simply scale because scale3d uses hardware acceleration. You'll also want to add -webkit and -moz prefixes for better compatibility.
jsFiddle example
I use one of Bootstrap examples: http://twitter.github.com/bootstrap/examples/fluid.html
The following code is inserted into the navbar-inner div:
<div class="logo">
<div class="quadratLogo"> </div>
</div>
Styled as:
.logo {
font-size: 24px;
font-family: 'Arial';
min-width: 500px;
}
.quadratLogo {
width:24px;
height:20px;
border-radius:0px 4px 0px 4px;
background-color: ff0000;
float:left;
}
Can you tell why quadratLogo div is invisible and the background-color property of quadratLogo is seen as unvalid by Chrome?
That's a valid color - but you forgot to include a # symbol before the hex value.
.quadratLogo {
width:24px;
height:20px;
border-radius:0px 4px 0px 4px;
background-color: #ff0000;
/* --------^ */
}
Your background-color property is incorrect.
it should be background-color: #ff0000; or set the proper color name
Read more about background-color
Div with heading and text inside. When the div is hovered the background changes and a 'toast' rises from the bottom of the div. Entire div is clickable based on the heading link and done in css.
The problem : in all versions of IE the link is only clickable when the cursor is NOT over text within the div (same problem in the fiddle example). It works correctly in FF, Opera, and Safari.
JSFiddle - the example
<div class="one-third">
<div class="inside">
<h3>Testing</h3>
<p>This some text inside the testing blox blah blah blah blah blah.</p>
<p>and some more and some more.and some more and some morep>and some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some more.</p>
<span class="toast">View more stuff</span>
</div>
</div>
css:
.one-third{
border:1px solid #d8d8d8;
margin:35px 9px 0;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background:#ffffff;
text-align:center;
position:relative;
overflow:hidden;
cursor: pointer;
padding:25px 0 0 0;
}
.one-third:hover{
background: #eeeeee;
}
.inside{
height:185px;
}
.inside h3 a, .inside h3 a:hover{ /*entire div is link*/
font-size: 20px;
color:#30629a;
text-decoration:none;
position:absolute;
width:100%;
height:100%;
top:13px;
left: 0;
z-index: 1;
}
.inside p{
padding:15px 15px 0 15px;
}
.toast{
background: rgb(71, 71, 71); /* Fall-back for browsers that don't support rgba */
background: rgba(0, 0, 0, .7);
display: block;
position: absolute;
left: 0;
width: 100%;
bottom: -30px;
line-height:30px;
color: #fff;
text-shadow:0 1px 1px #111111;
font-size:14px;
text-align: center;
transition: all 0.1s linear 0s; /*no moz, webkit, or o because radius is needed and won't scroll right*/
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.one-third:hover .toast {
bottom: 0;
}
Another solution is to add
background:url("datdata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
to .inside h3 a, .inside h3 a:hover. It's a base64 transparent gif that solves the problem for IE.
GIf found here: http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/
One solution is to move the 'a' outside if the h3. IE is having a problem with that element being behind the 'p' tags.
<a href="/#"><h3>Testing</h3>
<p>...</p></a>
http://jsfiddle.net/Zp2Rp/14/