Spent 2 hours already, trying to get it work, but so far I only get this:
.btn-custom{ width:100%; border-bottom: 100px solid blue; border-left:80px solid transparent; }
.btn2 {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0px;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
}
and this would be the button itself:
test
What I'm trying to make is this:
I think I would also need the transform:rotate function to rotate the button, but is there a way to rotate it, without rotating the text?
At the moment, with the code I've posted above the button isn't looking the way it should look, it's a bit shorter (height), the text is not where it should be and if I rotate it, the text rotates too. That is what it looks like now:
Could anyone help me with this?
Is there a reason why you don't want to use css shapes? Check out the demo I put together (result and snippet) it might help you.
You can do this by using that image as background for that particular div.
Related
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
I just want to know how can I add a border to the bottom of my container like this:
http://awesomescreenshot.com/0a551tq923
Assuming the border is white there and the container is above that.
I know it requires some minor CSS but can not figure that out.
Thank you.
I created a JSFiddle to show an example of what you could do. All using CSS.
I could see multiple ways of accomplishing this using the basic example I provided.
The css used for the bottom slant:
#bottom {
width: 0;
height: 0;
border-top: 20px solid black;
border-left: 500px solid transparent;
}
Edit:
Here is another example. More close to the website.
Also the website is using parallax. So it's going to be a little different then what I threw together.
you can do like :
#container {
background:url('path to image which needed as border') no-repeat center bottom;
}
With CSS3 you can do the same of the image that you like, try with:
#container {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
}
And if you want even the shadow try with:
-webkit-box-shadow: 0 5px 10px #303030;
I am designing a custom arrow (using background image) for a group of select boxes.
Problem is that each select box should be very short in width and therefore if the text is longer than this width it appears over the background arrow.
I need to find a way to display the background image over the text.
The other problem is that there are about 500 such select boxes and I do not wish to add a span layer in the HTML code for each of those boxes to accomplish the goal.
Therefore I am looking for a CSS solution only. JS would not work either.
Here is the CSS:
.dropdown{
width:57px;
border: 1px solid #cfcfcf;
height: auto;
border-radius: 5px;
padding:3px 4px 4px;
position: relative;
z-index: 0;
overflow:hidden;
}
.dropdown select{
border: none;
background-color: transparent;
outline: none;
padding: 1px 0 0 5px;
width:145%;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
}
JSFiddle here:
http://jsfiddle.net/pazzesco/r6c9zcpc/
Any comments or ideas will be greatly appreciated.
Have you considered just increasing the right padding on your .dropdown selector to say 10px?
padding:3px 10px 4px; should make sure your text never overlaps over the arrow.
Or do you actually want the text to display behind the arrow (which won't work as you've got the arrow as a background image)? :)
I hope I haven't misunderstood the question!
Cheers
Ines
Just increase padding-right values by 30px.
.dropdown select{ padding: 1px 30px 0 5px; }
Result: This will clip the text; 30px from right side.
JSFiddle Here: [http://jsfiddle.net/nvishnu/Lq7hosrd/2/]
I am currently have an issue which I wasn't able to solve myself, so I am turning my issue to you guys and hope that you could help me.
I am trying to create a dropdown list/menu and it works perfect, though the background border extends with the dropdown list, which look like a mess.
So I would like to get your opinion to solve this problem. I have put the code online and have a little demo for the menu with the dropdown list:
Demo: http://test.xavizus.eu/test2/
CSS: http://codepaste.net/zjyeha
Thank you very much in advance.
You can:
#menu {
height: 30px;
overflow: visible;
border-radius: 5px;
background-color: #484848;
color: #FFFFFF;
padding: 5px 5px 0px 5px;
margin: 5px 5px 5px 5px;
font: 8pt verdana, arial, sans-serif;
}
That will allow the ul submenu to display, but will keep the #menu from growing to accommodate it's height.
Good Morning,
Quick CSS question. Does anyone know any quick css to make an underlined transparent textbox? I basically want the textbox to be invisible except for the bottom border. I need it to function normally. Do I just remove left, right, and top borders and set it's background to transparent or something? Any examples of how to properly accomplish this? This app is for IE7 if that's relevant. Any help is always appreciated.
Cheers,
~ck in San Diego
This should do it:
input.myBox
{
border: 0px solid #000000;
border-bottom-width: 1px;
background-color: transparent;
}
Tested in IE8 (IE7 compatability mode)
Just a suggestion... since people are not going to be used to this, you may want to add a hover pseudoclass as well to change the color slightly when the user mouses over the field, as an extra visual "hint" of what's going on.
Example:
input.myBox:hover
{
border-color: #000066;
background-color: #FFFFF7;
}
Try to set your left, right and top borders values to be none
#textarea {
font-size: large;
letter-spacing: 2px;
height: 20px;
border: 2px solid gray;
padding:10px,20px;
width: 50%;
overflow: hidden;
resize: vertical;
min-height: 30px;
line-height: 20px;
outline: none;
border-top:none;
border-left: none;
border-right: none;
}
<textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="Your message here.."></textarea>