EDIT: It seems the snippet works fine if I remove z-index from the parent, but it's most certainly not doing that on my forum. Take a look: http://pjonline.tk/index.php?act=idx
So, I have something a little complicated set up. Basically, I'm making a forum, right? And each forum has a description. Since some go on to multiple lines, I have it set as display:block so there's no trouble with wrapping.
Now, I want a kind of fancy look for these. Specifically, this:
Except, uh, y'know. Properly made. My first attempt was with percentage border-radius, but it was squished in too much. So I decided to create a div around it that'd have normal borders, and with both borders having a transparency fade so it'd look seamlessly like the display above.
I wandered around Google for a while and eventually found the idea to use ::after to get a gradient rounded border. Unfortunately, due to the display:block, the ::after's background is appearing on top of the actual background. ::before didn't help either.
So um, lil bit stuck on what to do ^^; I'd really like a border to what I've set, but nothing's working out and you of course just can't set the colour of top-left/bottom-right >>
Is there a way I could do this?
Current codes:
body { /* only here to set font size/family */
font-size: 11px;
font-family: arial;
}
#wrapper { /* a container these are held in with a specific z-index */
position:relative;
z-index:7;
}
.forum-desc {
background: #EFEFEF;
border: 1px solid transparent;
display: block;
border-radius: 387px 115px 387px 115px / 36px 22px 36px 22px;
margin-left: 40px;
width: 335px;
height: 24px;
padding: 5px;
font-style: italic;
text-align: justify;
-moz-text-align-last: enter;
text-align-last: center;
background-clip: padding-box;
position: relative;
z-index: 2;
}
.forum-desc::after {
position: absolute;
top: -2px;
bottom: -2px;
left: -2px;
right: -2px;
background: linear-gradient(red, blue);
content: '';
border-radius: 387px 115px 387px 115px / 36px 22px 36px 22px;
z-index: -2;
}
<div id="wrapper">
<span class="forum-desc">Various information pertaining to rules and the proper way to act on the forum and game.</span>
</div>
Here u go my frnd...
css:-
body { /*only here to set font size/family */
font-size: 11px;
font-family: arial;
}
.forum-desc {
background: #EFEFEF;
border: 1px solid transparent;
display: block;
border-radius: 387px 0px 387px 0px / 36px 22px 36px 22px;
margin-left: 40px;
width: 335px;
height: 24px;
padding: 5px;
font-style: italic;
text-align: justify;
-moz-text-align-last: enter;
text-align-last: center;
background-clip: padding-box;
position: relative;
}
.forum-desc::before {
position: absolute;
top: -2px;
bottom: -2px;
left: -2px;
right: -2px;
background: linear-gradient(red, blue);
content: '';
border-radius: 387px 0px 387px 0px / 36px 22px 36px 22px;
z-index: -2;
}
Output:-
... Apparently it was my .row4's background-color that was blocking it all from layering properly... Bizarre, but an issue resolved by assigning .row4 a z-index, I guess. I did everything right, just had conflicting code x:
Related
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>
I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution.
Is there a way I can make the text responsive, or flow to a double line on smaller screens?
I have put the code into JS fiddle to show what I am using here.
h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}
You could use a skew'd pseudo element for this, allowing for the text to wrap if need be.
.title {
display: inline-block;
width: 70%;
min-height: 50px;
line-height: 50px;
background: lightgray;
position: relative;
}
.title:before {
content: "";
position: absolute;
height: 100%;
min-width: 120px;
width: 40%;
left: 80%;
background: lightgray;
transform: skewX(45deg);
z-index: -1;
}
<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>
I'm having a nightmare, I have a very simple premise, it works fine when it's occupying one line...
http://imgur.com/dKtkJQs,vFJvW7c#0 <-- it should look like this
However, if it's in a narrower column and spans over two lines, the + and the > just don't want to vertical center align.
http://imgur.com/dKtkJQs,vFJvW7c#1 <-- This is how it looks when over two lines, not my desired result
For some reason, the fiddle has the :before overlapping when it doesn't in my code. But my point mainly is, how do I get the + and > to vertically align in the middle? I think I've torn all my hair out.
HTML code
CREATE 1st UNIT
CSS code
body {
font-family: 'Open Sans', 'sans-serif';
padding: 20px;
padding-top: 50px;
background-color: #CCCCCC;
font-weight: 100;
font-size: 12px;
text-align: center;
}
.bttn{
position: relative;
display: block;
margin-top: 3px;
padding: 5px 10px 5px 40px;
background: #1E90FF;
font-size: 18px;
color: #ffffff;
font-weight: 700;
text-decoration: none;
}
.bttn::before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
height: 100%;
padding: 5px 10px 5px 10px;
content: "+";
background: #104E8B;
font-size: 18px;
font-weight: 500;
}
.bttn:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
padding: 5px 10px 5px 10px;
float: right;
content: ">";
font-weight: 500;
}
.create, .create::before, .create::after{
font-size: 10px;
}
.create{
padding-left: 20px;
}
.create::before, .create-coffer::after{
padding: 5px 5px 5px 5px;
}
Vertical alignment is difficult when dealing with responsive elements. My suggestion would be that the 'plus' and 'arrow' icons be background-images of the psuedo elements. That way you can align them to the exact center.
Otherwise, you could align the elements vertically using the translate trick. But then you'd also need the dark blue background to be an absolute positioned span element.
top: 50%;
transform: translateY(-50%);
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
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.