I am trying to use a background image on an li-element to indicate the current tab being selected. The image is meant to overlap the li-element to show half-borders on top and bottom of the li-element and these borders turning up and down at the side of the tab panel.
The problem is that the image does not show up, even though it is clearly being found (according to the dev tool). If I set a background color or a frame around the div containing the background, that shows correctly and with the right dimensions. Here is my current code:
<ul class="ulTabSelect">
<li>Character<div class="tabLiBG"></div></li>
<li>Skills<div class="tabLiBG"></div></li>
<li>Equipment<div class="tabLiBG"></div></li>
</ul>
And the css:
ul.ulTabSelect {
font: 16px Verdana,sans-serif;
left: 0;
margin-top: 200px;
top: 550px;
width: 135px;
}
ul.ulTabSelect a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
color: #9F9270;
display: block;
font: bold 1em sans-serif;
padding: 5px 10px;
text-align: right;
text-decoration: none;
}
ul.ulTabSelect a:hover {
color: #FFFFCC;
}
ul.ulTabSelect li {
position: relative;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 0.1em solid rgba(0, 0, 0, 0.9);
margin-bottom: 2px;
}
.ui-state-active .tabLiBG {
position: absolute;
display: block;
top: -36px;
left: 110px;
width: 45px;
height: 84px;
background-image: url("/img/liSelect.png");
background-repeat: no-repeat;
background-position: 90px -27px;
background-color: transparent;
opacity: 1.0;
z-index: 3;
}
.tabLiBG {
display: none;
}
You can also see this in action at www.esobuild.com where it is the main tab selector to the left. Kinda run out of ideas here what to try to get it working.
It works ok if you set
background-position: -17px 11px;
or some value around that
I couldn't find the class ui-state-active in your html. That could be the issue.
Related
I'm doing a React & Sass tutorial and the last image on the slider/carousel disappears whenever I hover on an image.
The issue seems to stem from position: absolutein &:hover. If I remove this, the last image appears whenever I hover on an image. I need to include this line so that the hover appears at the correct position.
The .scss for the slider:
.list {
width: 100%;
margin-top: 10px;
.listTitle {
color: white;
font-size: 20px;
font-weight: 500;
margin-left: 50px;
}
.wrapper {
position: relative;
.sliderArrow {
width: 50px;
height: 100%;
background-color: rgb(22, 22, 22, 0.5);
color: white;
position: absolute;
z-index: 99;
top: 0;
bottom: 0;
margin: auto;
cursor: pointer;
&.left {
left: 0;
}
&.right {
right: 0;
}
}
.container {
margin-left: 50px;
display: flex;
margin-top: 10px;
width: max-content;
transform: translateX(0px);
transition: all 1s ease;
}
}
}
The .scss for the individual items within the slider:
.listItem {
width: 225px;
height: 120px;
background-color: var(--main-color);
margin-right: 5px;
cursor: pointer;
color: white;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover{
width: 325px;
height: 300px;
position: absolute;
top: -150px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
border-radius: 5px;
img {
height: 140px;
}
}
}
Screenshots:
Try to use margin properties to set image to proper position coz position:Absolute will shift the image to move according to the page and top : 150px makes the image move beneath the main image(Cover Image)
I just realized what's going on. When I hover, the item that is being hovered is taken out of the list and the rest of the items are pushed inwards, it wasn't actually missing. It would have been more obvious had I used different images for each item.
I'm trying to recreate Alexander Plyuto's modern skeumorphic style (now called neumorphism) in CSS:
I'm attempting to do this by having a colored shadow on the top and left, and a differently colored shadow on the bottom and right.
I researched MDN for box-shadow and I can see box-shadow supports multiple values, but rather than being top-right-bottom-left like the rest of CSS, multiple values are actually full-size shadows for all sides that are stacked on top of each other:
The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).
Is it possible to create this effect in CSS?
Note that 'no' is an acceptable answer, but creating additional HTML (ie, not using CSS) is not. Buttons in HTML are normally represented by <button>A button</button>
As I suggested in the comments before this was re-opened, my suggestion is to use pseudo-elements to achieve the double shadow effect. You could probably achieve this with just one, but here's my quick-and-dirty exaple I've whipped up to show it off:
body {
background: #424242;
}
.button {
box-sizing: border-box;
display: flex; /* Just to center vertically */
align-items: center;
justify-content: center;
width: 160px;
height: 55px;
border-radius: 1em;
text-align: center;
font-family: sans-serif;
font-weight: 600;
color: #2b2a2e;
text-decoration: none;
background: linear-gradient(48deg, #c4ccd1, #e1e5e8);
position: relative;
z-index: initial;
}
.button::before, .button::after {
content: "";
display: block;
position: absolute;
width: 160px;
height: 35px;
background: transparent;
border-radius: 1em;
z-index: -1;
opacity: 0.65;
}
.button::before {
top: -1px;
left: -1px;
background-color: #fff;
box-shadow: 0 0 10px 5px #fff;
}
.button::after {
bottom: -1px;
right: -1px;
background-color: #b6c7e7;
box-shadow: 0 0 10px 5px #b6c7e7;
}
Request
I got a very close answer to your question. Here is the
https://jsfiddle.net/nuakbqe7/1/
<div class="button">
<p>Request</p>
</div>
Here is the css:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
font-family: "Poppins", sans-serif;
transition: 0.5s;
}
body {
background: #e1ebf5;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
min-height: 97vh;
}
.button {
border-radius: 17px;
cursor: pointer;
background: #e1ebf5;
box-shadow: 6px 6px 11px #d2dce6, -6px -6px 11px #edf2f7;
width: 300px;
text-align: center;
}
p {
font-size: 18px;
color: #202c3d;
text-shadow: 2px 2px 2px #c3cfde;
}
This question was originally closed by a moderator in error. During the time the question was closed, and answers were not allowed, multiple users have contacted me with solutions. As the question has now been reopened, I'm posting their solutions, with credit to them, as as community wiki so I don't get karma.
In short: CSS itself doesn't provide a way to directly set different shadow colors on different sides. However there are ways to achieve a neumorphic look - see below:
neumorphism.io CSS generator
There is now an online Neumorphism CSS generator at https://neumorphism.io/
#noomorph's answer (provided as a comment when answers were closed)
Use two shadows (as mentioned), but with the offsets arranged so that one covers the top and left, the other covers bottom and right.
As commenters have noted the gradients can overlap. It's likely not
possible to copy the demo, as the demo has a wide spread radius but no
overlap, which cannot be achieved in CSS as the shadows stack on top
of each other.
body {
background: lightgrey;
}
button {
border: none;
background-color: #efefef;
color: black;
font-size: 24px;
text-transform: uppercase;
padding: 20px;
margin: 50px;
position: relative;
border-radius: 10px;
box-shadow: -2px -2px 8px 4px white, 2px 2px 8px 4px #222;
}
<button>This is a button</button>
#disinfor's answer (provided on chat when answers were closed)
Use a pseudo element, that has a gradient background, and is itself blurred. It's likely not possible to copy the demo here either, as the higher amount of darkness in the start of the gradient means that the blurry shadow isn't uniform:
body {
background: lightgrey;
}
button {
border: none;
background-color: white;
color: black;
font-size: 24px;
text-transform: uppercase;
padding: 20px;
margin: 50px;
position: relative;
border-radius: 5px;
}
button::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
background: linear-gradient(350deg, rgba(10,10,10,0.8) 0%, rgba(255,255,255,0.8) 100%);
filter: blur(10px);
}
<button>This is a button</button>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have a jsfiddle here - http://jsfiddle.net/0nvns9Lj/1/
I've done what I need to do but don't know if it's the best way - I'm sure it should be easier.
I just need to create a play button so I have a circle containing a triangle.
It's working but seems like alot of messing for something simple
.wrap{
background: #ddd;
height: 300px;
position: relative;
}
.circle{
background: red;
border-radius: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin: -25px 0 0 -25px;
}
.circle_inner{
position: relative;
height: 100%;
}
.circle_inner:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}
You can (and should) do this simpler.
* { margin:0; padding:0 }
figure {
background: #ddd;
height: 200px;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
figure button[name="play"] {
width: 50px;
height: 50px;
background: red;
border: none;
border-radius: 100%;
margin: auto;
cursor: pointer;
}
figure button[name="play"]:focus {
outline: 0;
border: 1px solid hsl(210, 58%, 69%);
box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}
figure button[name="play"]::after {
content: '';
display: inline-block;
position: relative;
top: 1px;
left: 3px;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
<figure>
<button name="play"></button>
</figure>
Editable demo: http://jsbin.com/mipali/5
There is not much to improve.
Maybe you can use a special font like 'Webdings', and otherwise you can make a simple CSS triangle. In both cases you just need a simple element for the button, and a ::before pseudo-element for the shape. In the HTML and CSS below, both methods are shown.
Both buttons use a normal A element, so the buttons could (if you can find any url or useful onclick event to attach to it) still work as a normal link when you don't even have CSS (think about the visually impaired).
Moreover, the HTML doesn't contain any extra markup apart from the class names. No 'inner' element needed, and I think that's the most important improvement. The CSS isn't that much shorter than your's but I got rid of the 'inner' element, so the markup is completely clean.
And remember: if you want more complex shapes, you also have a ::after pseudo-element at your disposal. :)
/* Basic red round button properties */
.button {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
color: white;
/* Hide the text 'play', which is present in the HTML document for accessibility */
font-size: 0;
}
/* Properties for the pseudo-element that almost every button will need.
You can just merge it into the style below if you are only going to have
the play button. */
.button::before {
content: "";
display: block;
position: absolute;
}
/* Play button properties using font */
.play1.button::before {
font-family: 'Webdings';
font-size: 28px;
content: '\25B6';
top: -2px;
left: 12px;
}
/* Play button properties using CSS shape */
.play2.button::before {
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 15px solid white;
top: 10px;
left: 16px;
}
Play<br>
Play
I am trying to design this kind of header (like in the attached image) in my site with no success is any one can help please?
Header I am trying to design
Web site with this header
I create this:
html
<h1 class="ribbon">
<strong class="ribbon-content">CAPTURE|WEDDING PHOTOGRAPHY</strong>
</h1>
css
.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 50%;
position: relative;
background: #ffffff;
color: rgb(134, 152, 158);
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #fff;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #000000 transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
fiddle
You can play with colors size etc.
Source for css: css ribbon
That is a Ribbon.
Knowing that, you can focus your Google search with amazing results:
3D Ribbon Generator
Ribbon Builder
Ribbon on CSS Tricks
Enjoy
Wide and narrow screens is a problem.. How can I set the position of the picture? (site footer menu bar - fixed)
Click on the image to see detail
Can you help? Thank you!
Menu bar code:
div.footer{ /* main*/
background: none repeat scroll 0 0 #000000;
border-top: 1px solid #222;
bottom: 0;
left: 12%;
line-height: 30px;
position: fixed;
text-align: center;
text-decoration: none;
width: 963px;
z-index: 999;
margin: 0 auto;
}
div.footer a {
color: #999;
}
div.footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
I'm guessing you want that "new" image to appear in the right corner of one of your links. To do so you need to set position:relative to your link and position the image absolute. Something like this:
div.footer a {
color: #999;
}
div.footer a img {
position: absolute;
top: -10px;
right: 5px;
}
You can set the top and right as big as you want