Pictures are cut on my Tumblr blog - tumblr
On my Tumblr blog I don't understand why images in Photoset are cut, so we can't see all their height.
For example, one picture is 700px width by 394px height, but what we see is 700px width by 383px height, so 11px are missing !
Here is the page:
http://www.scarabeearchitecture.fr/
Here is the CSS for photos and photoset:
.posts {
width: 100%;
max-width: 1024px;
margin: 0 auto 48px;
background: rgba(0, 0, 0, 0.0);
padding: 0px 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}
.posts_inner {
width: 100%;
max-width: 700px;
margin: 0 auto;
padding-bottom: 26px;
word-break: break-word;
}
.chat .posts_inner,
.link .posts_inner {
width: 87%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.audio_inner {
overflow: hidden;
}
.photo .posts_inner,
.video .posts_inner,
.audio .posts_inner,
.quote .posts_inner,
.link .posts_inner {
width: 100%!important;
max-width: 1024px!important;
margin-left: auto;
margin-right: auto;
}
.photo .posts_inner .date,
.video .posts_inner .date,
.audio .posts_inner .date,
.quote .posts_inner .date,
.link .posts_inner .date,
ul.tags {
width: 100%!important;
margin-left: auto;
margin-right: auto;
}
#permalinkpage .posts_inner p {
margin-left: auto;
margin-right: auto;
}
.photoset-grid-lightbox_outer,
.video-grid-lightbox_outer,
.audio-grid-lightbox_outer,
.quote-grid-lightbox_outer,
.link-grid-lightbox_outer,
.video-container {
margin-top: 34px;
}
.quote_outer {
color: #f2f2f2;
text-shadow: none;
font-style: italic;
}
.chat_outer {
margin-top: 16px;
}
.link_outer {
color: #f2f2f2;
text-align: center;
text-shadow: none;
}
.link_outer h2 {
padding-bottom: 0!important;
border-bottom: none!important;
}
.link_outer h2 a {
font-size: 24px!important;
font-weight: normal!important;
color: #f2f2f2!important;
}
.link_outer a {
color: #999999!important;
font-size: 14px!important;
}
.link {
padding-top: 22px;
}
.photoset-grid-lightbox_outer {
padding: 0px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
}
.video-grid-lightbox_outer {
padding: 3px 38px 38px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
}
.audio-grid-lightbox_outer,
.quote-grid-lightbox_outer {
padding: 38px;
overflow: hidden;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
}
.link-grid-lightbox_outer {
padding: 44px 38px 58px 38px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0))), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%), #333333 url(http://static.tumblr.com/wofln30/tT8myt4ib/bg_noise.png) center;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.6) inset;
}
.photoset-grid-lightbox,
.photopost,
.video-container {
position: relative;
z-index: 50;
-webkit-box-shadow: 0 1px 20px gray;
-moz-box-shadow: 0 1px 20px gray;
-ms-box-shadow: 0 1px 20px gray;
-o-box-shadow: 0 1px 20px gray;
box-shadow: 0 1px 20px gray;
background: #000000;
}
.photoset-grid-lightbox:before,
.photopost:before,
.video-container:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 1px;
z-index: 100;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.photoset-grid-lightbox:after,
.photopost:after,
.video-container:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.posts h2,
#permalinkpage h2 {
font-size: 28px;
padding-bottom: 18px;
border-bottom: solid 2px rgba(0,0,0,0.04);
}
.posts h2 a {
color: #333333;
font-size: 28px;
}
.sp_show {
display: none;
}
.posts p,
#permalinkpage p {
margin: 30px 0 30px;
font-size: 14px;
}
#media screen and (max-width : 768px){
.posts {
padding: 24px 0 0;
}
.posts_inner {
width: 87%;
margin-left: auto;
margin-right: auto;
}
.photo .posts_inner,
.video .posts_inner {
width: 95%;
}
.photoset-grid-lightbox_outer,
.video-grid-lightbox_outer,
.audio-grid-lightbox_outer,
.quote-grid-lightbox_outer,
.link-grid-lightbox_outer,
.video-container {
margin-top: 24px;
}
.video-grid-lightbox_outer {
padding: 13px 38px 38px;
}
.photo .posts_inner .date,
.video .posts_inner .date {
width: 92%;
margin-left: auto;
margin-right: auto;
}
.posts p,
#permalinkpage p {
font-size: 1.6rem;
}
}
#media screen and (max-width : 480px){
.photoset-grid-lightbox_outer,
.audio-grid-lightbox_outer,
.video-grid-lightbox_outer {
padding: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
background: none;
}
.photoset-grid-lightbox,
.photopost,
.video-container {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
.audio-grid-lightbox_outer {
width: 87%;
margin-left: auto;
margin-right: auto;
}
.pc_show {
display: none;
}
.sp_show {
display: inline;
}
.spotify_audio_player {
max-width: 100%!important;
height: 80px!important;
}
}
.posts div.date a,
.posts div.date,
#permalinkpage div.date a,
#permalinkpage div.date {
color: #999999;
font-size: 12px;
font-weight: bold;
}
.posts div.date a:hover {
color: #006bd5;
}
.posts p.date {
margin-bottom: 6px;
text-align: right;
color: #999999;
font-size: 12px;
}
.posts p.date a {
color: #999999;
}
.caption {
width: 100%;
margin: 35px auto 0;
}
.posts .link {
font-size: 12px;
}
Related
Multiple responsive pop-ups in same page
i'm trying to add two responsive popups in my page but since i'm new in javascript i cant figure out how to modify this code to make it work for both. So far only one works.
html
<div class="container">
<h1>Responsive Popup</h1>
<a id= "popup-trigger1" class="popup-trigger">Open PopUp 1</a>
<a id= "popup-trigger2" class="popup-trigger">Open PopUp 2</a>
</div>
<div class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
css
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger { display: block; margin: 0 auto; padding: 20px; max-width: 260px; background: #4EBD79; color: #fff; font-size: 18px; font-weight: 700; text-align:center; text-transform: uppercase; line-height: 24px; cursor: pointer; }
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
.container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
text-align: center;
background: white;
border-radius: 10px;
border: 5px solid #9AD3DE;
box-sizing: border-box;
}
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
> div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(#000000, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
#include transform(translate(-50%, -50%));
left: 50%;
top: 50%;
text-align: center;
border: 5px solid #9AD3DE;
}
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color:white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height:30px;
text-align:center;
font-size:20px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {background: #fff; color: #333; font-size: 19px; line-height: 30px; z-index: 9999;}
# Javascript#
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close
buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("#popup-trigger1").on("click", function() {
popupOpenClose($(".popup"));
});
});
This is my codepen Codepen
Your help willlll be so much appreciated.
Thank you very much!
krystel
Here is one way to have separate popups. I added another popup div, gave them unique ids, then created a data-target attribute on the triggers. I changed the trigger to work on everything that has a popup-trigger class, and then made a tweak to the wrapper code so that it will create a wrapper in the current popup rather than checking if ANY wrapper exists.
There is also a memory leak because every time you open a popup, you attach more event handlers instead of only attaching them once. I would highly recommend you rework them to avoid issues down the road. Convert them to global events on the document rather than per-popup. I did not change them below as I wanted a minimal change set so you could see what was necessary for your question.
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper", popup).length == 0) {
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if (e.target == this) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function() {
$(".popup-trigger").on("click", function() {
var target = $(this).data('target');
popupOpenClose($(target));
});
});
/* this was actually some kind of LESS or SASS/SCSS originally.
I just stripped out the unnecessary parts, but no changes were necessary */
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 260px;
background: #4EBD79;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 24px;
cursor: pointer;
}
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
}
h1,
p,
h2,
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
letter-spacing: 0.5px;
}
h1 {
font-size: 40px;
text-align: center;
color: #666666;
margin: 0 0 30px 0;
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup>div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color: white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: 'Arial Black', Arial, sans-serif;
cursor: pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {
background: #fff;
color: #333;
font-size: 19px;
line-height: 30px;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Responsive Popup</h1>
<a class="popup-trigger" data-target="#popup1">Open PopUp 1</a>
<a class="popup-trigger" data-target="#popup2">Open PopUp 2</a>
</div>
<div id="popup1" class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
<div id="popup2" class="popup">
<div class="popup-text">This is my popup 2</div>
<span class="popup-btn-close">×</span>
</div>
prevent body scroll on modal close
I have a simple html/css modal dialog that I close with a button and onclick event handlers in javascript. When the modal window is closed, the body of the site scrolls to the top of the screen. I need to prevent this.
Here is my code:
function modalClose() {
if (location.hash == '#log_in') {
location.hash = '';
}
}
// Handle ESC key (key code 27)
document.addEventListener('keyup', function(e) {
if (e.keyCode == 27) {
modalClose();
}
});
var modal = document.querySelector('#log_in');
// Handle click on the modal container
modal.addEventListener('click', modalClose, false);
// Prevent event bubbling if click occurred within modal content body
modal.children[0].addEventListener('click', function(e) {
e.stopPropagation();
}, false);
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
height: auto;
width: 75%;
position: relative;
margin-top: 2%;
margin-bottom: 10%;
margin-left: 10%;
margin-right: 10%;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -11px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
text-indent: 0px;
}
.close:hover {
background: navy;
}
<link href="https://thomaswurdinger.com/Store_Reboot/css/styles.css" rel="stylesheet" />
<script src="https://thomaswurdinger.com/Store_Reboot/js/js.js"></script>
<link href="https://thomaswurdinger.com/Store_Reboot/css/style.css" rel="stylesheet" />
<div id="log_in" class="modalDialog">
<div>
X
<div>Modal Contents</div>
</div>
</div>
I changed :
if (location.hash == '#log_in') {
location.hash = '';
}
to:
if (location.hash == '#log_in') {
location.hash = 'pagename.php';
}
Lifted corner shadows extending to the side
A website I'm working on needs to use a certain shadow effect for some panels.
I have found the desired CSS shadow on the web but I have noticed it has some problems - when the target div is very tall, the shadow pops out behind it on its sides.
I discovered the shadow is built from two, solid colour, rectangular objects that cast the shadow. They hide behind the div at an angle which creates that 'curly', sheet of paper-like shadow effect. This angle also makes them pop out when used with a very tall div block.
I'm not very good with CSS so I don't know how to fix that. I've tried limiting the rectangles max-height property, but that makes them too short to leave any shadow below the div.
Is there a way to make the boxes stick to the bottom of the div and never extend around its sides?
This is the shadow I used:
.shadow {
position: relative;
}
.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content:"";
bottom: 12px;
left: 7px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.shadow:after {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
right: 7px;
left: auto;
}
You can see an example in this fiddle, the first div shows the shadow working properly, the second one shows the problem: jsfiddle
You can remove the top property on the pseudo elements and give a fixed height to them. You can also give a max-height value to pseudo elements to ensures they don't overflow the div when it is short :
DEMO
.box {
background-color: #3a6fa9;
display: block;
padding: 4px;
margin-bottom: 30px;
margin-left: 30px;
border: 1px solid #ddd;
border-radius: 4px;
width: 500px;
height: 300px;
}
.box-tall {
width: 500px;
height: 2000px;
}
.shadow {
position: relative;
}
.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content:"";
bottom: 12px;
height:100px;
max-height:10%;
left: 7px;
width: 50%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.shadow:after {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
right: 7px;
left: auto;
}
Instead of top: 80%;, you can just set a small height, such as height: 20px;:
.shadow:before, .shadow:after {
z-index: -1;
position: absolute;
content: "";
bottom: 12px;
left: 7px;
width: 50%;
height: 20px;
/* top: 80%; */
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-moz-box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
box-shadow: 0 15px 10px rgba(119, 119, 119, 0.6);
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
your fiddle updated: http://jsfiddle.net/e6yh07pd/3/ problem was the top:80%; value you have. can't understand why you used it... isteed remove it and just add a height fixed (px) for your after and before
rounded corner with background image discoloration
I have a div inside of a div. If you look at the top left and top right corners, you'll notice a thin line of discoloration around the curve of the div, that is, it isn't the background color. That tiny tiny little curved sliver. What is causing this?
Anyway to remedy this without having to remove the border radius?
Please see the fiddle
http://jsfiddle.net/V24XB/7/
css is as follows
.sub-area-title
{
background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);
border-bottom: 1px solid #cccccc;
background-color: white;
margin: 0 auto;
color: white;
font-size: 18px;
font-weight: bold;
padding:10px 75px 10px 75px;
text-align:center;
z-index:1000;
}
.sub-area-container
{
display: inline-block;
width: auto;
min-width: 450px;
background-color: white;
min-height:100px;
max-height: 400px;
/*display:inline-block;*/
margin: 0px 15px 35px 15px;
border-left: 2px solid #6E6E6E;
border-right:2px solid #6E6E6E;
border-bottom:2px solid #6E6E6E;
border-top:2px solid #6E6E6E;
box-shadow: 0px 2px 12px #888888;
border-radius: 10px;
/*border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;*/
max-height: 300px;
overflow-y: auto;
z-index: 1;
}
NOTE: I'm primarily concerned with IE9+. Chrome and firefox and everything else are irrelevant in this particular case
that's the background color of the .sub-area-container(change it an see), one way to work this out would be adding an inset box shadow to that container like this: box-shadow: 0px 2px 12px #888888, inset 0px 5px 0 #000; DEMO you can remove the body tag
It's a bit of a hack but you could try to fill the background-color of your container under the title if you don't want to use an image.
Just replace your white background by a gradient filling the top 10px of your container.
Something like this should work on IE:
.sub-area-title
{
background-image: linear-gradient(to bottom, #636363 0%, #323232 100%);
border-bottom: 1px solid #cccccc;
background-color: white;
margin: 0 auto;
color: white;
font-size: 18px;
font-weight: bold;
padding:10px 75px 10px 75px;
text-align:center;
z-index:1000;
}
.sub-area-container
{
display: inline-block;
width: auto;
min-width: 450px;
background: -ms-linear-gradient(top, #636363 10px, #ffffff 11px, #ffffff 100%);
min-height:100px;
max-height: 400px;
/*display:inline-block;*/
margin: 0px 15px 35px 15px;
border-left: 2px solid #6E6E6E;
border-right:2px solid #6E6E6E;
border-bottom:2px solid #6E6E6E;
border-top:2px solid #6E6E6E;
box-shadow: 0px 2px 12px #888888;
border-radius: 10px;
/*border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;*/
max-height: 300px;
overflow-y: auto;
z-index: 1;
}
Facebook-like selection
I have made this Facebook-like selection in which the selection can be unselected by clicking the x button. I already got my Auto-complete working but I only want to have the selected options to look like the one on the link. How would I do that?
The source code for FCBKcomplete can be found here:
http://www.emposha.com/javascript/fcbkcomplete.html
It's basically a list (UL) with styled list items.
/* Copyright: Guillermo Rauch <http://devthought.com/> - Distributed under MIT - Keep this message! */
/* TextboxList sample CSS */
ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; }
*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */
ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; white-space:nowrap;}
ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; }
ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-input input { width: auto; overflow:visible; margin: 0; border: 0px; outline: 0; padding: 3px 0px 2px; } /* no left/right padding here please */
ul.holder li.bit-input input.smallinput { width: 20px; }
/* Facebook demo CSS */
ul.holder { margin: 0 !important }
ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;}
#apple-list ul.holder li.bit-input { margin: 0; }
#apple-list ul.holder li.bit-input input.smallinput { width: 5px; }
ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('close.gif'); }
ul.holder li.bit-box a.closebutton:hover { background-position: 7px; }
ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; }
/* Autocompleter */
.facebook-auto { display: none; position: absolute; background: #eee; z-index:1001;}
.facebook-auto .select_all_items {display: block; float: right;}
.facebook-auto .default { padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px;font-family:"Lucida Grande","Verdana"; font-size:11px; }
.facebook-auto ul { display: none; margin: 0; padding: 0; overflow: auto; position:absolute; z-index:9999}
.facebook-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; background-color: #eee }
.facebook-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; }
.facebook-auto ul li.auto-focus { background: #4173CC; color: #fff; }
.facebook-auto ul li.auto-focus em { background: none; }
.deleted { background-color:#4173CC !important; color:#ffffff !important;}
.hidden { display:none;}
#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; }
.ie6fix {height:1px;width:1px; position:absolute;top:0px;left:0px;z-index:1;}