I've been playing around with making shapes in CSS. I'm finding that it's all fine and dandy until you want to add a box-shadow or border to your element that was created with both a ::before and ::after pseudo element.
Here's an example I put together of a plus (+) icon made with two elements. I'm attempting to put a box-shadow on both the elements, but of course don't want the top most element's (::after, in this case) shadow to overlap the bottom element.
http://codepen.io/trevanhetzel/pen/Gsurk
Has anyone found any clever tricks around this?
Here's the code, by the way (Sass and Compass FTW!)
<a class="add"></a>
.add {
position: relative;
float: left;
padding: 2em;
background: green;
&::before {
content: "";
position: absolute;
left: 45%;
top: 25%;
width: 10%;
height: 50%;
background: #fff;
#include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75));
}
&::after {
content: "";
position: absolute;
left: 25%;
top: 45%;
width: 50%;
height: 10%;
background: #fff;
#include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75));
}
}
Which outputs something like this: http://t.hetz.co/Rpne
It has poor browser support at the moment but the filter:dropshadow property can be used
-webkit-filter: drop-shadow(4px 0px 1px black);
-moz-filter: drop-shadow(4px 0px 1px black);
filter: drop-shadow(4px 0px 1px black);
Codepen Example
Related
I'd like to achieve the following layout, in Ionic Vue, ideally using native components. Below is just a schema of what I want and I'm mostly interested in the desktop behavior:
Vue.createApp({
data: () => ({
isLeftOpen: false,
isRightOpen: false
}),
methods: {
toggleSidebar(side) {
this[`is${side}Open`] = !this[`is${side}Open`];
}
}
}).mount('#app')
body { margin: 0; overflow: hidden; }
* { box-sizing: border-box; }
#app {
height: 100vh;
background-color: #f5f5f5;
}
main {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
sidebar {
background-color: white;
display: block;
padding: 1rem;
width: 270px;
position: absolute;
top: 0;
bottom: 0;
transition: transform .21s cubic-bezier(.5,0,.3,1);
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 12%);
}
sidebar[left] {
left: 0;
transform: translateX(-280px)
}
sidebar[right] {
right: 0;
transform: translateX(280px)
}
sidebar.open {
transform: translateX(0);
}
sidebar button {
width: 2rem;
height: 2rem;
position: absolute;
border-radius: 1rem;
border: 1px solid #f5f5f5;
right: .5rem;
top: .5rem;
cursor: pointer;
font-size: 1.5rem
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<main>
<button #click="toggleSidebar('Left')">left</button>
<button #click="toggleSidebar('Right')">right</button>
</main>
<sidebar left
:class="{open: isLeftOpen}">
Left sidebar
<button #click="toggleSidebar('Left')">×</button>
</sidebar>
<sidebar right
:class="{open: isRightOpen}">
Right sidebar
<button #click="toggleSidebar('Right')">×</button>
</sidebar>
</div>
In short, I want two sidebars completely unrelated, which should be opened/closed independently on all devices, according to user's choice. The argument that opening more than one sidebar at a time is not good UX doesn't really hold water on this project, as it's basically a full-screen map and the sidebars hold various controls and info about what's on the map. The requirement is that the user might want to have both sidebars open, but they might also want them both closed, even on big screens, to maximize the displayed portion of the map.
What options do I have here? To only have one "native" sidebar and mimic the second one with custom elements, using my own container and my own menu toggle resembling a native one? How would I make those look and behave as "native" on Android and iOS?
Here's my current layout, which achieves everything I want, except opening one sidebar always closes the other.
I don't know much about Ionic Vue (started using it today) but I'm decent in Vue. Tbh, I find Ionic Vue impressive. Very neat, documentation is stellar. But I'm stuck on this layout issue which seemed trivial at first.
Thanks for looking into this.
I succesfully implemented featherlight.js plugin on my wordpress blog to display some photos as a lightbox.
By default featherlight.js shows up the nextIcon and previousIcon only when the mouse hovers a certain area of the image.
But I would like the nextIcon/previousIcon to be always visible outside of the image when the lightbox is invoked.
Made some tests with "span.featherlight-next" resp. "span.featherlight-previous" so that the left/right icons are outside of the image...but until now I didn't find out how to do it.
Does someone know how to modify the CSS file so that the nextIcon and previousIcon to be always visible ?
Any help is greatly appreciated.
Thank you for your answer. Well, I came up with a solution which satisfies my needs. In fact I just moved the previous/next navigation icons inside the border of .featherlight-image, and the icons just are just visible on a mouse hover (which is the default).
First I set a bigger white border to the image:
.featherlight .featherlight-image {
max-width: 100%;
border: 32px solid #fff;
}
then I fine tuned .featherlight-next & .featherlight-previous and it's span classes based from featherlight.gallery.css, like this:
.featherlight-next,
.featherlight-previous {
display: block;
position: absolute;
top: 25px;
right: 0px;
bottom: 0;
left: 80%;
cursor: pointer;
/* preventing text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* IE9 hack, otherwise navigation doesn't appear */
background: rgba(0,0,0,0);
}
.featherlight-previous {
left: 0px;
right: 80%;
}
.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(0,0,0,0.0);
}
.featherlight-next span,
.featherlight-previous span {
display: none;
position: absolute;
top: 50%;
width: 80%;
font-size: 22px;
line-height: 50px;
/* center vertically */
margin-top: -40px;
color: #777;
font-style: normal;
font-weight: normal;
text-shadow: 0px 0px 3px #888;
}
.featherlight-next span {
right: 7px;
left: auto;
text-align: right;
}
.featherlight-previous span {
right: 0px;
left: 7px;
text-align: left;
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
display:none;
}
Putting the background to white could also help hiding the white image border / frame so that the navigation icons are more distinctive when hovering:
.featherlight:last-of-type {
background: rgba(255, 255, 255, 0.6);
}
Hope this helps someone ;-)
Check the source. You'll find how the hide/show is achieved:
.featherlight-next span,
.featherlight-previous span {
display: none;
// ...
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
So you simply need to override the display: none with your own custom rule.
First of all I have to say:
what a phantastic piece of software!
Well designed, implemented and documented, and many, many cool features.
Tanks a lot for giving that away as Open Source!
Now I have made a slider implementation for the "Gambio GX"-shopsystem (a very advanced osCommerce fork.)
You can see it here in action: http://marmorkamin-shop.de/Test/
I have used all image transformations (377) and caption animations (438) available, both are randomly selected for each slide...
(Resulting in 163,618(!) different ways to change slides....)
The slider is dynamically generated with PHP, based on slide-information in the shops database....
As inline-styles are very inflexible in such an environment, I have moved the styling to a stylesheet.
It already works like a charm, almost....
Two problems I am encountering:
The caption area is sometimes clipped
(see 1st caption in this picture: screenshot)
Only bullets 1, 2 and 3 in the bullet navigator are active, the others do not respond.
Any idea what could be the reason for this??
Thx again for this great software!
Edit:
The caption area is sometimes clipped (see 1st caption in this
picture: screenshot)
Found a quick and dirty solution for this meanwhile:
Assign a clip: auto !important; CSS direktice for the caption elements...
But I am sure there must be a better solution :-)
Re: caption clipped
Please always specify width and height for caption.
You can specify width and height in css file,
.slide_caption_1 {
left: 100px; top: 200px; width: 110px; height: 29px;
}
.slide_caption_2 {
left: 150px; top: 250px; width: 110px; height: 29px;
}
.slide_caption_3 {
left: 200px; top: 300px; width: 110px; height: 29px;
}
And you can specify inline style as well,
<div class="jssor_slide_caption slide_caption_1" data-u="caption" t="*" style="width: 110px; height: 30px;"></div>
Re: bullet problem
Style for 'mousedown' of bullet navigator not specified.
Given class of navigator item prototype is 'jssor_navigator_entry', the class name for 'active' state is 'jssor_navigator_entryav', the class name for 'mousedown' state is 'jssor_navigator_entrydn'
So, please add following css code in slideshow.css file.
.jssor_navigator_entrydn {
padding: 5px 0px 0px; border: currentColor; border-image: none; width: 27px; height: 24px; text-align: center; color: white !important; font-weight: bold !important; text-decoration: none; margin-right: 0px; float: left; display: block; position: relative !important; z-index: 9; cursor: pointer; background-color: rgb(50, 22, 1);
}
Here is an example to define bullet navigator in a simple way,
<script>
var jssor_options={
...
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
...
$SpacingX: 5, //[Optional] Horizontal space between each item in pixel, default value is 0
...
}
...
};
<script>
<!-- Bullet Navigator Begin -->
<style>
.the_navigator{
position: absolute;
bottom: 0px;
}
.the_navigator_item, .the_navigator_itemdn, .the_navigator_itemav {
position: absolute;
width: 27px;
height: 24px;
line-height: 24px;
color: #fff;
font-weight: bold;
background-color: #321601;
text-align: center;
cursor: pointer;
}
.the_navigator_item:hover, .the_navigator_itemav {
background-color: #d1013f;
}
</style>
<!-- bullet navigator container -->
<div class="the_navigator" data-u="navigator">
<!-- bullet navigator item prototype -->
<div class="the_navigator_item" data-u="prototype"><numbertemplate></numbertemplate></div>
</div>
<!-- Bullet Navigator End -->
I am trying to make a handle bar element with a nice textured line pseudo element that is horizontally and vertically centered in the middle of it.
I understand that lots of people do this effect with background images but I want this to be vector so that it works even on high density displays.
Demo: jsFiddle
The whole thing just uses a single element and uses this CSS:
html, body
{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header_handle
{
width: 100%;
height: 7px;
position: relative;
background: #9e978b;
border-top: 1px solid #b8b1a5;
border-bottom: 1px solid #827c72;
text-align: center;
cursor: s-resize;
}
.header_handle:before
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
background: #ff0000;
width: 10px;
height: 100%;
}
.header_handle:after
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
width: 42px;
height: 1px;
background: #ada599;
outline: 1px solid #ada599;
border-top: 1px solid #6b665e;
border-bottom: 1px solid #6b665e;
}
Here is a second demo that shows the basic effect in action at a bigger level. It just has aligning inline-block element and then the centered inline-block element.
The desired effect should look like this:
The first demo above works at heights above 22px and if you turn off the height attribute it expands to 22px so it seems to think the pseudo element is 22px or something like that.
What the heck is going on here?
Add font-size: 0; to the main element .header_handle. This eliminates any space between inline elements.
I got the trick from the Fighting the Space Between Inline Block Elements on CSS-Tricks.
I'm new to web design and I'm working on a small project, but I'm faced with a problem and I would appreciate any help.
So I have three div containers and I'm using them to show thumbnails of photos inside an album and I've given each one of them a CSS :hover selector and I want all three classes to run at once when the mouse is over any one of the divs. I tried to simulate a mouseover event but it didn't work and I tried to setattribute with javascript didn't work either. Here is my css.
#frame {
border: solid 2px black;
background-image:url(cpHDFLI6_mini.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:183px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
#frame1 {
border: solid 2px black;
background-image:url(20397.jpg);
background-repeat:no-repeat;
position:absolute;
top:75px;
right:228px;
left:auto;
display: block;
width: 60px;
height: 70px;
z-index:1;
}
#frame2 {
border: solid 2px black;
background-image:url(candle.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:273px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
z-index:0;
}
#frame2:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame1:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
If you don't understand what I want I can explain more.
NO Way to do it on CSS only. And Hover is not apply for DIV. Its for A, UL > LI...
You must know about Javascript or jQuery.
Mouse hover on 1 div then $.AddClass ( Active Class ) for ALL DIVS, and When Mouse Out of Div, $.RemoveClass for ALL DIVS.
If you don't know about jQuery or Javascript, you can ask here, we can help.
You can copy and paste it for DIv2 and Div3 about mouse move out and over too. If you understand on DOM, you can try $("div[name=3DIV]"). for shorter code , however I am not sure u understand the script or not, so I posted simple script but long code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" /></script>
<script language="javascript">
$(document).ready(function() {
$("#divID1").mouseover(function() {
$("#divID1").addClass("ACTIVE_CLASS");
$("#divID2").addClass("ACTIVE_CLASS");
$("#divID3").addClass("ACTIVE_CLASS");
});
$("#divID1").mouseout()(function() {
$("#divID1").removeClass("ACTIVE_CLASS");
$("#divID2").removeClass("ACTIVE_CLASS");
$("#divID3").removeClass("ACTIVE_CLASS");
});
});
</script>