Replacing <hr> line with with a custom glyph - css

I would like to replace horizontal line rendered by default by the <hr> tag with three asterisks (horizontally centered). If possible, I want to achieve this with pure CSS, specifically:
I don't want to touch my markup, there should be just plain <hr>, no helper divs or anything like this (because I'm styling Markdown files);
no background images;
no Javascript.
First I tried:
hr {
width: 0;
}
hr:before {
content: "***";
}
and it almost does the trick, but I want it centered, and have no idea how to center it.

Browsers display <hr>s using borders, so:
hr {
border: none;
}
hr::before {
content: '***';
display: block;
text-align: center;
}

Slap a text-align:center on your psuedo-element.

Related

Basic CSS styles not applying

I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }

Novice looking to make this stylish mouse hover effect

Hopelessly novice, but dedicated.
Using Wordpress.
I'd like to be able to do this:
http://www.ericryananderson.com/
On hover, the images turn greyscale and captions appear.
All is smooth.
My initial hopes of finding a easy plugin that switches images upon hover has been crushed.
All help is greatly appreciated.
Arvid
If you can simply add plain CSS and HTML code to your site, then this is the structure:
HTML:
<div class="cool-card">
<img src="whatever.png">
<h2>Whatever text you want to show</h2>
</div>
And then, in CSS:
.cool-card {
/* Add here any custom style (width, height, etc.) to the card */
}
.cool-card > img {
width: 100%;
height: 100%;
}
.cool-card:hover > img {
filter: saturate(0); /* Makes the image black and white, by setting saturation to 0 */
}
.cool-card > h2 {
/* If you want to change the look of the text, do it here */
display: none;
}
.cool-card:hover > h2 {
display: block;
}
If you can't, I'm sorry, but I've tried :)

CSS How to achieve word cloud?

I'm trying to create a word cloud type output with only CSS. Basically, I have a div box and a X number of text elements which need to go inside the box. However, they need to be of different font size. For example, let's say I have this:
.box { display: flex; width: 40vw; height: 30vw; overflow: hidden; }
.text1 { font-size: 5vw; }
.text2 { font-size: 4vw; }
.text3 { font-size: 3.5vw; }
.text4 { font-size: 3vw; }
I can position the text elements inside the box but I have a few questions regarding the layout. My lack of thorough CSS knowledge prevents me from telling if this is possible at all with just CSS or not:
How can I avoid collision of the text elements?
How can I ensure they stay within the boundaries of the box?
I believe it's not possible to make Word Cloud using CSS only, you need to have Javascript function or lib like WordCloud2.js that handle element positioning.
Demo:
https://timdream.org/wordcloud/#wikipedia:Cloud
References:
https://github.com/timdream/wordcloud2.js
https://github.com/timdream/wordcloud

Can I adjust the width of a <pre> area to fit the text?

I have the following:
<p>This is a test</p>
<pre>public class Car {
protected Car() { }
protected Car(int speed) { }
protected void Car() { }
}</pre>
<p>Another line</p>
and
pre {
font-family: monaco,consolas,"courier new",monospace;
font-size: 1em;
min-height: 3em;
overflow: auto;
padding: 1em;
xwidth: 80%;
background-color: red;
}
When the text displays the <pre> background goes the full width of the page. I have a demo here:
fiddle
What I would like is for the red background to stop just after the far most right character of my code. I don't want to see a big red area that extends from one side of the page to another.
Can someone tell me if it is possible to do this with CSS. I really am not sure as I cannot think what I can do.
Thanks
You can use display: inline-block;:
http://jsfiddle.net/hLVV9/1/
Although please check out the browser support, because it wouldn't surprise me if IE doesn't support it.
The best solution so far :
pre {
white-space: pre-wrap;
}
You can use float:left and a clearing div to achieve this.
http://jsfiddle.net/hLVV9/2/
For that behavior you will need to float your <pre>. Floated blocks of course cause some layout changes, so you need to wrap it in another clearing block element:
<div class="pre-wrapper"><pre>Lorem ipsum</pre></div>
.pre-wrapper {
overflow: hidden;
}
.pre-wrapper pre {
float: left;
}
Adding display: inline-block should do it for FF, Safari and Chrome.
But make sure to check in all browsers and how it behaves, specially IE
One more approach:
pre {
display: table;
border-collapse: separate;
}
It allows the margins to natively collapse (in contrast to display: inline-block). As a bonus, it works with a wide range of browsers starting with IE8 or even older.

image with hover? (mouse over)

to change to
when mouse over.. like you can do with a:hover, how can i do this?
I tried
addFriend img:hover{
background: url(images/addFriend_hover.png);
}
Ditch the img tag, and do it without javascript
(off the top of my head, untested)
HTML
<div class="addFriend">Add Friend</div>
CSS
.addFriend { background: url(images/addFriend.png); }
.addFriend:hover { background: url(images/addFriend_hover.png); }
For it to work in all browsers with the least amount of code you can do it with CSS.
Add A Friend
.icon {
display: block;
width: (width of image);
height: (height of image);
text-indent: -9999px; /* hides the text 'Add A Friend' */
background: url(url of image) no-repeat center center;
padding-right: 55px;
}
.icon:hover {
background: url(url of new image) no-repeat center center;
}
You could also use jQuery.
$('img.addFriend').hover(function() {
$(this).attr('src','images/addFriend_hover.png');
}, function() {
$(this).attr('src','images/addFriend.png');
});
Edit
You could also do non-jQuery, I assume you don't want a background-image or an href
<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />
You have to use a container with a background image, e.g. a div with a specified height and width. Then you can use the background image and a :hover-pseudo-class.
This tutorial might be useful: http://www.w3schools.com/js/js_animation.asp
To see if it does what you want, scroll down to "The Entire Code" and click "Try it yourself".

Resources