I'm looking to create a blinking text cursor that I also want to style to look pretty similar to the following website:
http://paul.institute/enrol
I had a look at the source but it's all written in one single line and is a bit of a mess.
Related
I am trying to create a simple dashboard to show information at a glance. I am using the swimlane number card chart found here: https://swimlane.gitbook.io/ngx-charts/examples/number-card-chart.
Everything is working but I can't get the title of a card to wrap to the next line if it is longer than the card, here is an image of what I am talking about:
I have tried applying style to the parent div and tried with selectors like ".ngx-charts-number-card.title" ".ngx-charts-number-card.title" ".card.title" etc. I can't even modify the style when using the inspector live in the browser. I can't find any documentation to style these elements so any help would be appreciated.
I am attempting to get a QLabel display an image and some text centered vertically with that image.
I can't figure out how to do this.
Most sources I've found on the internet suggest using the following code:
ui->label->setText("<img src='c:/images.jpg' style='vertical-align:middle;'> Hello");
However what I get is this.
The bottom line of the text is centered near the image, but what I like to have is the middle line of the text to be centered (like so: made in ms paint). Sounds like a pretty common task yet I wasn't able to find any answer.
How can I achieve this?
I tried to run it in my QtCreator and it work fine. So, for start, you can try the following:
Check the picture size. Open it in paint.net or something like that. Perhaps the top image is an empty area of the invisible. Those, the actual size of the image looks like an elongated rectangle, in which the visible part is on the bottom. Try other image.
Try to change the format jpg to png. I had problems with displaying images in jpg format, so I always try to use the png.
Problems with styles. Qt may work incorrect with css style, because it not part of the Qt. I tested in version Qt 5.4.0. If you have an older, may be its time to update it.
I can't really even describe what the effect's name, but its the effect appear usually on the top right of the typing input bar when the other side is typing. For example in hangout, there is one like this
I wonder how can I achieve such effect in css, in other words, those green fading effected loading effect on those 3 dots with CSS only?
Thanks
Some links and demos (javascript + css3)
fancyInput
TextInput fx
10 js text fx
textilate
typed.js
create typing effect
Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.
Here's some examples of fonts designed to be used this way.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
I was sort of able to get this to work using CSS like this:
http://jsfiddle.net/6SakC/2/
This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.
However, this doesn't seem ideal to me. Two problems:
I don't want to duplicate the text in the html.
I have to guesstimate the top-margin by trial and error.
If the text wraps, this doesn't work anymore.
Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.
Thanks!
You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/
That also solves the problem with the text wrapping.
To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)
As the title says, is there a way to change the text selection cursor? Changing the cursor in CSS (eg. cursor: hand) just changes the normal cursor.
I suppose you mean “cursor” in the old sense–the thing that appears in editable text to indicate the location where text is to be inserted or where text deletion or insertion is to take place. Its appearance is, in modern systems, typically a blinking (appearing and disappearing) thin vertical line. I’m afraid there isn’t a way to change it, even as planned or proposed. If there were, I would expect to find it in the CSS3 Basic User Interface Module, where the cursor property is defined.
The CSS specifications and drafts reflect a new meaning for “cursor,” namely something that used to the called “pointer.” For further confusion, one of the possible values for cursor is pointer (typically, appearing as a hand).