I'm just been learning some HTML5/CSS3/JS and part of jQuery recently so still a noob to it for the most part but trying to make a navigation bar that's a bunch of parallelogram blocks stacked vertically, so far just messing around this is what I have for each block but this makes them rectanges and I was looking to push the top of each box over to create a parallelogram look:
.nav {
background-color: blue;
border: 1px solid black;
border-radius: 3px;
margin: 2px;
text-align: center;
font-family: Verdana;
font-weight: bold;
font-size: 1em;
color: yellow;
padding: 15px;
cursor: pointer;
}
I saw something about using 'transform: skew(xdeg)' but it didn't seem to affect anything, maybe I wasn't implementing it correctly?
Have you tried:
.nav {
/*all your properties */
transform: skew(30deg);
-o-transform: skew(30deg); /* Opera */
-ms-transform: skew(30deg); /* IE 9 */
-webkit-transform: skew(30deg); /* Safari and Chrome */
}
Related
I have a message bar that is hidden unless the server responds with a message to render something (e.g. "The password and username are invalid."). Then it eases in from the top to display the message.
In latest versions of Chrome, Edge, Safari, and Firefox, this is working fine. In IE, it flies up from the bottom of the browser, across the viewing area, and then mounts where it should be when it is viewable.
This is the Sass that I have. I've been toying with the transform and transition to get the correct results, without affecting other browsers. I not been able to, so looking for suggestions:
#messages {
z-index: 999;
position: fixed;
width: 100%;
.container {
max-width: 890px;
#media (max-width: 992px) and (min-width: 768px) {
max-width: 720px;
}
#media (max-width: 767px) and (min-width: 576px) {
max-width: 510px;
padding-left: 0px;
padding-right: 0px;
}
}
a {
color: #FFF;
font-weight: bold;
}
i {
cursor: pointer;
padding-top: 3px;
}
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-5vh);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
.hide-messages-bar.show-success-messages-bar {
background-color: $green;
transform: translateY(0vh);
padding: 8px 0;
}
.hide-messages-bar.show-error-messages-bar {
background-color: $red;
transform: translateY(0vh);
padding: 8px 0;
}
}
arbuthnott got me pointed in the right direction. It turns out px works as well so I used that instead. Was having a hard time getting % to behave the same as it did in other browsers.
Used this tool to translate vh to px:
https://jsfiddle.net/Dwaaren/j9zahaLL/
And ended up with this:
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-22.3px);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
The 0vh on the other two classes apparently wasn't doing anything so left that as is. Now all major browsers perform similarly.
when I use both transition andtransform, then the animations are not very smooth on both chrome andfirefox. It blurs when you hover over it. The only browser on which it is normal is IE.
Chome / FireFox (Note the text, when the animation starts it start to be blurry. When it finishes it pops back to smooth letters.)
Desired result (This is working in IE)
How do I make these animations also smooth on chrome and firefox?
Snippet:
as soon as the transition is complete, the element has to be focused again. Thats what it looks like now on chrome and firefox.
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 14px;
color: #fff;
padding: 10px;
border-radius: 3px;
transition: all .33s ease-in-out;
}
button:hover {
transform: scale(1.1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>
You can accomplish a very similar effect using font relative units (em) and increasing the element font-size on hover.
button {
font-size: .875em; /* =14/16 or whatever your base font size is */
padding: .625em; /* =10/16 */
border-radius: .1875em; /* =3/16 */
}
button:hover {
font-size: 1em; /* close enough to 1.1x */
}
Note this generally considered to be less performant than using transforms, at the very least try to position the element so that there are fewer re-flows around it.
Chrome 64 on Windows 10:
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: .875em; /* =14/16 or whatever your base font size is */
color: #fff;
padding: .625em; /* =10/16 */
border-radius: .1875em; /* =3/16 */
transition: all .33s ease-in-out;
transform: translateX(-50%) translateY(-50%);
}
button:hover {
font-size: 1em; /* close enough to 1.1x */
transition: all .33s ease-in-out;
}
<span style="position: relative; left: 2.5em; top: 1em;">
<button>Hover me</button>
</span>
I managed to remove the blur on Firefox with:
Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.
backface-visibility: hidden;
or ( or both )
TranslateZ also works as it is a hack to add hardware acceleration to the animation.
transform: translateZ(0);
You can try if perspective can fix your issue, it fixes the text into it's z-axis, no technical idea why.
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 14px;
color: #fff;
padding: 10px;
border-radius: 3px;
transition: all .33s ease-in-out;
-webkit-perspective: 1;
perspective: 1;
}
button:hover {
transform: scale(1.1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>
The best and so far only way I found which removes the blur effect is to scale down the element first, and then scaling it up to its original size.
Here's an example:
button {
background-color: cornflowerblue;
border: 1px solid cornflowerblue;
font-weight: bold;
font-size: 16px;
color: #fff;
padding: 20px;
border-radius: 3px;
transition: all .33s ease-in-out;
transform:scale(0.7);
}
button:hover {
transform : perspective(1px) scale(1);
transition: all .33s ease-in-out;
}
<button>Hover me</button>
I know this is not the desired result but I looked quite hard and didn't find anything better.
I am developing a website and "example.com" is the test heading of it, I wanted to know how can I make ".com" written sideways bottom-up (obviously by having a lesser font size than "example").
There might be a simpler way, also your question is somewhat vague on the last direction part. So this is a quick answer were I put some borders on to show where stuff is.
.example-thing {
border: solid lime 1px;
}
.firstpart {
margin-top: 1em;
font-size:2em;
vertical-align: bottom;
border: solid blue 1px;
display: inline-block;
}
.com {
margin-bottom: .5em;
margin-left: -.5em;
border: solid orange 1px;
vertical-align: bottom;
display: inline-block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}
<div class="example-thing">
<span class="firstpart">example</span>
<span class="com">.com</span>
</div>
I am using arrows buttons like these ones:
<button type="button" class="btn btn-default btn-arrow-left" > </button>
body { /* just for this demo. */
padding: 30px;
}
.btn { /* just for this demo. */
margin-top: 5px;
}
.btn-arrow-right,
.btn-arrow-left {
position: relative;
padding-left: 18px;
padding-right: 18px;
}
.btn-arrow-right {
padding-left: 36px;
}
.btn-arrow-left {
padding-right: 36px;
}
.btn-arrow-right:before,
.btn-arrow-right:after,
.btn-arrow-left:before,
.btn-arrow-left:after { /* make two squares (before and after), looking similar to the button */
content:"";
position: absolute;
top: 5px; /* move it down because of rounded corners */
width: 22px; /* same as height */
height: 22px; /* button_outer_height / sqrt(2) */
background: inherit; /* use parent background */
border: inherit; /* use parent border */
border-left-color: transparent; /* hide left border */
border-bottom-color: transparent; /* hide bottom border */
border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
-webkit-border-radius: 0px 4px 0px 0px;
-moz-border-radius: 0px 4px 0px 0px;
}
.btn-arrow-right:before,
.btn-arrow-right:after {
transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.btn-arrow-left:before,
.btn-arrow-left:after {
transform: rotate(225deg); /* rotate left arrow squares 225 deg to point left */
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
}
.btn-arrow-right:before,
.btn-arrow-left:before { /* align the "before" square to the left */
left: -11px;
}
.btn-arrow-right:after,
.btn-arrow-left:after { /* align the "after" square to the right */
right: -11px;
}
.btn-arrow-right:after,
.btn-arrow-left:before { /* bring arrow pointers to front */
z-index: 1;
}
.btn-arrow-right:before,
.btn-a
But I do not know how can I hide or change the yellow decorator when it is selected. Is it possible?
NOTE: I am working with Bootstrap v3.3.7
You can set the outline property to none when on focus, like so:
.btn:focus, .btn:active{
outline:none !important;
}
Here is your updated code
The yellow line is the outline which appears on focus of the buttons. You can get rid of it by using below CSS code.
.btn {
outline: 0 !important;
}
Use css Outline property and set it to None
.btn-arrow-left{outline: none !important;}
I'm looking for a way to get the blurry background effect of OS X 10.10 working in css. Blurring with filter:blur or an SVG Gaussian filter will also blur the border, so this will not work.
Here is an example of the effect:
this is CSS imitating OSX Yosemite
Stylesheet
body {
background-image: url('your image');
background-size: cover;
font-size: 14px;
}
.block {
color: #000;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
background: inherit;
position: relative;
}
.block:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
-webkit-filter: blur(10px) saturate(2);
}
.title {
font-size: 1.4em;
font-weight: 300;
color: #222;
padding: 8px;
background: rgba(235,235,235,0.85);
border-bottom: 1px solid rgba(0,0,0,0.1);
text-align: center;
}
.content {
padding: 8px;
background: rgba(255,255,255,0.66);
}
and your html like following
<div class="block">
<div class="title">Hello World</div>
<div class="content">This is your main content!</div>
</div>
Example
You can use Css3 and JS, as explained in this article. Below you can find a snippet of Css code, for the full working example, please refer to the original post and fiddle below:
/* TRANSFORMATIONS */
.glass.down {
/* Fallback for browsers that don't support 3D Transforms */
transform: translateY(100%) translateY(-7rem);
transform: translateY(100%) translateY(-7rem) translateZ(0);
}
.glass.down::before {
transform: translateY(-100%) translateY(7rem);
transform: translateY(-100%) translateY(7rem) translateZ(0);
}
.glass.up, .glass.up::before {
transform: translateY(0);
transform: translateY(0) translateZ(0);
}
See this demo:
http://jsfiddle.net/cQQ9u/
You can achieve this effect with webkit's backdrop-filter css property
https://webkit.org/demos/backdrop-filter/
These are just workarounds... it works only with image background and it won't with text (for example if we want to create modals windows).... you can combine css and js to get some similar effect but for now we can't get the right behavior with pure CSS.
This is my idea and hope some CSS guru can contradict me but I think this is a CSS3 technology limit..... maybe in future we'll can do it.