I would like to make this shape for the title.
What HTML and CSS should I use to make this shape?
For creating a shape like you asked for, you can use any html tag (in my case I used h1 tag).
I've given my tag a class .title, you can give any. To this class I've only assigned basic and required properties to achieve what you asked for, you can give any set of properties as you desire together with these.
Below I'm attaching a snippet please go through.
.title {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
border-width: 0 0 1px 5px;
border-style: solid;
border-bottom-color: #ababab;
border-left-color: #000;
}
<h1 class="title">This is my title</h1>
You can achieve this using border property (border-left & border-bottom), like:
.title {
border-left: 5px solid #444;
border-bottom: 1px solid #444;
padding-left: 15px;
line-height: 1.4;
}
<h1 class="title">This is a title</h1>
Hope this helps!
Related
Im styling the following HTML to display messages:
<div className="message">
<div className="message_label">
A message
</div>
</div>
Using the following SCSS class:
.message {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
&_label {
color: #444;
padding: 5px;
}
}
Following BEM, I want to create another modificator version for error messages:
<div className="message--error">
<div className="message_label">
This is an error!
</div>
</div>
This version will just change the previous colors to red so I want to extend the previous SCSS class:
.message {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
&_label {
color: #444;
padding: 5px;
}
&--error {
#extend .message;
border: 3px solid red;
&_label {
color: red; // This is not working
}
}
}
But the selector message_label is not working, since its an inner selector and the #extend doesnt affect it, as explained in SCSS Docs. Whats the best way to extend a class including inner selector?
You can check the DEMO here.
The reason this isn't working is because all #extend does is share some css properties across different classes. So in this case, I would expect it to create a selector like:
.message, .message--error {
margin: 10px;
border-radius: 10px;
border: 3px solid lightblue;
}
.message_label {
color: #444;
padding: 5px;
}
.message--error {
border: 3px solid red;
}
.message--error_label {
color: red;
}
You can see at the bottom of the above css how your color: red might actually end up in a style sheet.
Finally, please do not format your scss like this. It would be a nightmare to maintain and understand.
Answer
My suggestion to answer your question is to just use .message and .message--error on the same element, similar to how Bootstrap does things
I'm currently having an issue using the ngx-bootstrap sortable component.
I want to be able to use the sortable component horizontally instead of the stacked vertical examples from the doc examples. ngx-bootstrap sortable
Would anyone be able to help out here by providing a potential solution or be able to explain why this may not be possible using ngx-bootstrap.
bs-sortable creates divs internally to show the draggable elements. Now by default the display property of div is block, thats why it is arranged in vertical stack.
To make it horizontal you just need to add the css property display to inline-block in class sortable-item.
Demo
Template
<div class="row">
<div class="col">
<bs-sortable
[(ngModel)]="itemStringsLeft"
itemClass="sortable-item"
itemActiveClass="sortable-item-active"
placeholderItem="Drag here"
placeholderClass="placeholderStyle"
wrapperClass="sortable-wrapper"
></bs-sortable>
<pre class="code-preview">model: {{ itemStringsLeft | json }}</pre>
</div>
</div>
<div class="row">
<div class="col">
<bs-sortable
[(ngModel)]="itemStringsRight"
itemClass="sortable-item"
itemActiveClass="sortable-item-active"
placeholderItem="Drag here"
placeholderClass="placeholderStyle"
wrapperClass="sortable-wrapper"
></bs-sortable>
<pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
</div>
</div>
styles.css
.sortable-item {
padding: 6px 12px;
margin: 4px;
font-size: 14px;
line-height: 1.4em;
text-align: center;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
border-color: #adadad;
display: inline-block;
}
EDIT:
Rather than making changes in global style.css (which will apply changes globally), if you want to make changes in particular component only, you can use ng-deep pseudo selector in particular component.
app.component.css
bs-sortable::ng-deep .sortable-item {
padding: 6px 12px;
margin: 4px;
font-size: 14px;
line-height: 1.4em;
text-align: center;
cursor: grab;
border: 1px solid transparent;
border-radius: 4px;
border-color: #adadad;
display: inline-block;
}
So I want to try to do this in html and css but I can't seem to find anything. I only way I can think is by importing the text as an image but that will look bad. P.S Light blue line is for centering as I am designing the site in Photoshop first
<p class="test">
Conact Me
</p>
.test {
border-top-style: solid;
border-bottom-style: solid;
border-bottom-width: 1px;
}
A simple solution is using text-decoration: underline overline;.
p {
text-decoration: overline underline;
}
<p>
CONTACT ME
</p>
You can use border-top in css to create a line above text.
.mytextbox {
border-top: 1px solid #ff0000;
}
border-top property
Example of use
Try using borders to achieve the look you are wanting:
a.my-class {
display: inline-block;
padding: 5px 15px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
line-height: 1em;
text-decoration: none;
}
Well, you'd want to have the text element within a div, set the bg color property of the div to the color you're going for, and then set margins for the text element to push off the text by ~10px or so (looks like that's about where it's at in your mock up). From there you can set a border to only top, and bottom and style accordingly.
You can put the text inside a block level element and apply a top and bottom border. Advantage of this method against the text-decoration: underline overline; is, that you can simply define the space between text and lines with padding as you need it.
To make the width as long as the text is, just use display: inline-block;.
body {
background: #5cc8f6;
}
div {
display: inline-block;
padding: .5em;
border-top: 1px solid white;
border-bottom: 1px solid white;
color: white;
text-transform: uppercase;
font-family: Verdana;
font-size: 2em;
}
<div>Contact me</div>
I need a little help with my problem. I get following effect with this code:
#navLink{
font-family: oduda_bold;
font-size: 17px;
color: #fff;
text-decoration: none;
}
#navLink:focus{
border-radius: 10px;
border-style: solid;
border-width: 0px;
background-color: #ef5e99;
}
WRONG HIGHLIGHT
and I would like to have it highlighted like this:
NICE HIGHLIGHT
Is that possible to highlight link with larger (than its textvalue) area ?
Yes. Add padding and then fiddle around with the border radius until it meets your expectations:
#navLink:focus{
padding: 10px /*here*/
border-radius: 30px;
}
You need to use padding and set your link into an inline-block.
#navLink{
display:inline-block;
padding: 10px;
}
Ok, I'm quite new to CSS3. I have this code:
<div class="Mat-Shadow-Box-Text">
<div class="Mat-Shadow-Box-TextBleu2">
MyText
</div>
</div>
That works great. But then I want to change Mat-Shadow-Box-TextBleu2 for Mat-Shadow-Box-Text2. Same CSS class copy/pasted with 0 change (wanted to test before changing anything).
.Mat-Shadow-Box-Text
{
margin: 0px 0;
border-radius: 20px;
box-shadow: 10px 10px 20px #888;
behavior: url(ie-css3.htc);
}
.Mat-Shadow-Box-TextBleu2
{
border-radius: 20px;
border-width: 3px;
border-style: solid;
border-color: #888;
padding-left: 18px;
padding-bottom: 15px;
padding-top: 15px;
}
.Mat-Shadow-Box-Text2
{
border-radius: 20px;
border-width: 3px;
border-style: solid;
border-color: #888;
padding-left: 18px;
padding-bottom: 15px;
padding-top: 15px;
}
Now my 100$ question is: Why when I change the class name in my tag, it doesn't work? (the border doesn't appear on the web page). Also, I tried just renaming .Mat-Shadow-Box-TextBleu2 by .Mat-Shadow-Box-Text2 (in both CSS class and DIV code) and it doesn't work either!
So, to summarize, my original code works fine, but I can't rename nor change to another class in my second DIV tag. Note that I don't have this problem with my first DIV class. I can rename .Mat-Shadow-Box-Text or point to a different class and it works just fine.
Cheers!
When in dev its always a good practice after changing Back-End Code, CSS, or HTML to always Ctrl+F5 to refresh your browser to force it to get everything again from the server. That seems to be what you have happening here. Its especially noticeable with CSS changes.