I'm trying to move boxes up when simply doing a mouseover. I can mouseover on each box, but can't get it to move up.
Here's my code:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
}
Here's my LIVE DEMO
Your given examples did it by two CSS properties:
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}
You should use transform like the following:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
transition: all 200ms ease;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translateY(-3px);
}
You can add the following code when you hover the element to move up.
.post-item:hover{transform:translateY(-3%);}
I'm looking to achieve this multiple underline effect and figured out that using box-shadows would be the best way to do it. Specifically, I tried doing this and was successful:
I used the following CSS to do it:
h1{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF, 0 6px 0px #276FBF, 0 8px 0px 0px #FFF, 0 10px 0px #AF5B5B;
float: left;
}
However, I'd like to achieve an effect to turn specific underlines on and off as required. So I came up with this and added the classes to my HTML:
h1{
float: left;
}
.red{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF;
}
.blue{
box-shadow: 0 6px 0px #276FBF, 0 8px 0px 0px #FFF;
}
.brown{
box-shadow: 0 10px 0px #AF5B5B, 0 12px 0px 0px #FFF;
}
But the effect that it produced was this:
I tried adding the classes in different orders and also adding them dynamically using JavaScript, but I am still getting the same result. Am I doing anything wrong, or is there an alternative way to achieve the turn-on turn-off effect?
This could be accomplished with pseudo elements:
h1 {
display:inline-block;
border-bottom:2px solid #e8353b;
position:relative;
}
h1:before {
content:"";
height:2px;
width:100%;
background:#2762be;
display:block;
position:absolute;
bottom:-6px;
}
h1:after {
content:"";
height:2px;
width:100%;
background:#a3514f;
display:block;
position:absolute;
bottom:-10px;
}
<h1>Hello there</h1>
An interesting way using <span>s :)
You can add as many <span> as you want and just extend the colors palette in CSS:
.borders {
display: inline-block;
}
.borders span {
display: block;
height: 2px;
margin: 2px;
}
.borders span:nth-child(1) { background: red; }
.borders span:nth-child(2) { background: blue; }
.borders span:nth-child(3) { background: green; }
/* Add more here */
<h1 class="borders">
Hi there
<span></span>
<span></span>
<span></span>
</h1>
Or if you need only 3 borders and you don't want to insert additional HTML elements:
use a border-bottom for your first class, than :before on your second class and :after on your third class.
h1 {
position: relative;
display: inline-block;
}
.red{
box-shadow: 0 2px 0 red;
}
.blue:after, .green:before{ content: ""; position: absolute; width: 100%; left: 0; }
.blue:after{
bottom: -6px;
border-bottom: 2px solid blue;
}
.green:before{
bottom: -10px;
border-bottom: 2px solid green;
}
<h1 class="red blue green">Hi there</h1>
You can use linear-gradient, which will be fully transparent.
Note, when combine classes as you did, they doesn't merge those values, the last property set on an element will overwrite any previous, whether they are set in classes with different names or not, hence your line becomes all brown.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green),
linear-gradient(to right, transparent,transparent);
}
h1.blue{
background-image:
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can easily re-position the lines and close any gap by simply leave out the line you don't want.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green);
}
h1.blue{
background-image:
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can actually do this with only 1 pseudo-element.
Here's what I've done (with comments on how to control spacings):
h1 {
display: inline-block;
/* controls the last line */
border-bottom: 2px solid #a3514f;
}
h1:after {
content: "";
display: block;
/* controls space between 1st and 2nd line */
height: 2px;
width: 100%;
/* controls space between 2nd and 3rd line */
margin-bottom: 2px;
border-bottom: 2px solid #2762be;
border-top: 2px solid #e8353b;
}
<h1>Hello there</h1>
This was written based on #APAD1's answer, taking his idea of using borders.
This method offers the advantage of the whole ::after being part of the content of the <h1>, instead of being outside.
You can add up to five lines using pseudoelements and borders.
Each class adds a new line.
*,
*:before,
*:after {
box-sizing: border-box;
}
h1 {
display: inline-block;
padding-bottom: 2px;
position: relative;
}
h1:before,
h1:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 6px;
bottom: -10px;
}
h1:after {
bottom: -18px;
}
.one {
border-bottom: 2px solid red;
}
.two:before {
border-top: 2px solid blue;
}
.three:before {
border-bottom: 2px solid green;
}
.four:after {
border-top: 2px solid brown;
}
.five:after {
border-bottom: 2px solid orange;
}
<h1 class="one two three four five">Lorem ipsum</h1>
Just trying to get as many lines as posible, using pseudos, borders, shadows ...
You get up to 9 lines, that can be set / unset with 9 independent classes.
Some of them need will only work against a solid, known background-color (white in this case)
.base {
font-size: 60px;
position: relative;
display: inline-block;
}
.base:before,
.base:after {
content: "";
position: absolute;
left: 0px;
width: 100%;
height: 10px;
padding: 10px 0px;
background-clip: content-box;
}
.base:before {
bottom: -90px;
}
.base:after {
bottom: -170px;
}
.a {
border-bottom: solid 10px lightgreen;
}
.b {
box-shadow: 0px 10px white, 0px 20px green;
}
.c:before {
border-top: solid 10px lightblue;
}
.d:before {
background-color: red;
}
.e:before {
border-bottom: solid 10px yellow;
}
.f:before {
box-shadow: 0px 10px white, 0px 20px green;
}
.g:after {
border-top: solid 10px tomato;
}
.h:after {
background-color: magenta;
}
.i:after {
border-bottom: solid 10px gray;
}
.j:after {
box-shadow: 0px 10px white, 0px 20px brown;
}
<h1 class="base a b c d e f g h i j">Hello world</h1>
I'm looking for a way to create a tab bar that looks like the one in google chrome without using CSS3 or image resources. I want it to work in IE8.
...
This is a CSS3 example that I found on the Internet, but as you can see, it uses "transform", which is not available in IE8.
.tab-box {
height:50px;
background: #fff;
border-radius: 4px;
border:1px solid #ccc;
margin:0 10px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}
For old IE<9 add the class ie,
for non-IE<9 browsers do your amazing stuff with gradient etc....
html, body{height:100%; margin:0;font:16px/24px sans-serif;}
body{background:#abc;}
div{background:#fff;overflow:auto;}
/*TABS DEFAULT STYLES*/
/* here goes your awesomeness*/
.tabs{margin-bottom:0;padding:0;list-style:none;}
.tabs:after{content:"";display:table;clear:both;}
/*TABS IE*/
.tabs.ie li{
position:relative;
overflow:hidden;
float:left;
margin-right: -6px; /* (3) than adjust this value for the overlap */
}
.tabs.ie li a{
background: #ddd;
position:relative;
display:block;
padding: 4px 12px;
margin: 0 12px; /* (2) adjust the value till the borders corner touch */
}
.tabs.ie li a:before,
.tabs.ie li a:after{
content: "";
position:absolute;
top: 1px; width: 1px; /*(fictive 1px "roundness")*/
border-bottom: 60px solid #ddd; /* (1) Edit px till border is not cut */
}
.tabs.ie li a:before{
left: -21px; /* 20border + 1width */
border-left: 20px solid transparent;
}
.tabs.ie li a:after{
right: -21px; /* 20border + 1width */
border-right: 20px solid transparent;
z-index:2;
}
/* ACTIVE TAB */
.tabs.ie li a.active{
background:#fff;
}
.tabs.ie li a.active:after,
.tabs.ie li a.active:before{
border-bottom-color:#fff;
z-index:2;
}
.tabs.ie li:after{
content: "";
position:absolute;
top: 1px; width: 2px;
border-bottom: 60px solid #999;
right: -10px;
border-right: 20px solid transparent;
z-index:1;
}
<ul class="tabs ie">
<li><a>HOME</a></li>
<li><a class="active">ABOUT</a></li>
<li><a>PROJECTS</a></li>
<li><a>CONTACT</a></li>
</ul>
<div><h1>ABOUT</h1></div>
I'm using UberGallery and am trying to add facebook like button to jQuery colorbox. As far as I get is here:
(You can see the top of fb plugin)
Then if I press ctrl+f, write test(as I made <div id="extra-info">test</div>) and press enter I get normal view as I want to:
Question is: What do I need to change in css to make colorbox stretch at the beggining (on colorbox OnComplete function)?
colorbox.css (it's UberGallerys default one(nothing changed))
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
colorboxScripts.php (changed a little bit)
<script type="text/javascript" src="<?php echo $path; ?>"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='colorbox']").colorbox({maxWidth: "90%", maxHeight: "90%", opacity: ".5",
onComplete: function() {
$("#cboxContent").append('<div id="extra-info">test<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=673146712707892" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe></div>');
}
});
});
</script>
style.css (changed a little bit)
/* -------------------------------------------------------------------------- */
/* -----| GENERAL |---------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
html {
background-color: #222;
font-size: 100%;
}
body {
color: #333;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: .8em;
}
#galleryWrapper {
background-color: #FFF;
margin: 20px auto;
padding: 3px;
width: 1000px;
}
h1 {
background-color: #000;
color: #FFF;
font-size: 1.6em;
font-weight: bold;
margin: 0 0 3px;
padding: 8px;
}
#galleryListWrapper {
/* NULL */
}
/* -------------------------------------------------------------------------- */
/* -----| GALLERY LIST |----------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#galleryList {
margin: 0;
padding: 0 4px;
}
#galleryList li {
display: inline-block;
float: left;
list-style: none;
margin: 5px 5px;
padding: 0;
}
#galleryList li a {
background-color: #000;
border: 4px solid #DDD;
display: block;
padding: 1px;
}
#galleryList li a:hover {
border-color: #DA8600;
}
#galleryList li a img {
border: none;
}
/* -------------------------------------------------------------------------- */
/* -----| GALLERY FOOTER |--------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#galleryFooter {
background-color: #000;
color: #999;
margin-top: 3px;
padding: 8px;
}
#credit {
float: right;
font-size: .95em;
margin: 4px 0;
}
#galleryFooter #credit a {
color: #999;
}
#galleryFooter #credit a:hover {
color: #DA8600;
}
/* ---------------------------------------- */
/* ----| PAGINATION |-------------------- */
/* ---------------------------------------- */
#galleryPagination {
color: #FFF;
float: left;
font-size: .95em;
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
#galleryPagination li {
border: 1px solid transparent;
display: block;
float: left;
list-style: none;
margin-right: 1px;
}
#galleryPagination li:hover {
background-color: #FFF;
}
#galleryPagination li.title {
background: transparent url(../../page_white_stack.png) no-repeat left center;
border: 1px solid transparent;
font-weight: normal;
padding: 3px 6px 3px 22px;
}
#galleryPagination li a, #galleryPagination li a:visited {
color: #FFF;
display: block;
padding: 3px 6px;
text-decoration: none;
}
#galleryPagination li:hover a {
color: #000;
}
#galleryPagination li.current {
background-color: #DA8600;
color: #000;
font-weight: bold;
padding: 3px 6px;
}
#galleryPagination li.inactive {
background-color: transparent;
color: #999;
border: 1px solid transparent;
display: block;
padding: 3px 6px;
}
/* ---------------------------------------- */
/* ----| SYSTEM MESSAGES |--------------- */
/* ---------------------------------------- */
#systemMessages {
margin: 0;
}
#systemMessages li {
background-color: #DDD;
color: #000;
line-height: 1.4em;
list-style: none;
margin-bottom: 6px;
padding: 5px;
text-align: center;
text-shadow: none;
}
#systemMessages li.notice {
background-color: #DDD;
color: #FFF;
}
#systemMessages li.success {
background-color: #070;
color: #FFF;
}
#systemMessages li.error {
background-color: #DA8600;
}
/* ---------------------------------------- */
/* ----| MISCELLANEOUS |----------------- */
/* ---------------------------------------- */
#errorMessage {
background-color: #FFF;
display: block;
line-height: 1.4em;
margin: 20px;
padding: 20px;
text-align: center;
}
#cboxWrapper {
text-shadow: none !important;
}
#cboxCurrent {
display: none !important;
}
#cboxTitle {
font-size: 1em !important;
}
#extra-info {
position: relative; display: inline-block; bottom:4px; left:0; text-align:center; width:100%; color:#949494;
}
P. S. Yes I have read and tried these threads:
Adding div below images in colorbox
Facebook like button and colorbox
I need a slider like this one
http://itunes.apple.com/us/app/sparrow/id417250177?mt=12 (on Screenshots)
http://storymatters.com/showcase/there-is-an-app-for-that#slideshowWrap
Ideas?
That's just a custom scroll bar that works on webkit browsers: http://css-tricks.com/examples/WebKitScrollbars/ Here's an example
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
IE has a way to style scrollbars too, not as customizable though...
body {
scrollbar-arrow-color:#ffffff;
scrollbar-base-color: #ffffff;
scrollbar-dark-shadow-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3d-light-color:#ffffff;
}
So, if you want this to work across browsers, you're out of luck. The only way to do it is to write your own custom html for a scroll bar with the divs set to overflow: hidden