I am trying to mimic this look of the text split, I found the codepen.io for it but it uses SCSS and I am looking for it to be CSS only if possible. If someone could help me translate the code or make it so that is CSS, that would be great. Thanks for the help in advance.
While I am not going to write out all of the code for you I will suggest a method of doing it:
I suggest you make two div boxes, one for the filled in or solid text and one for the outlined text.
Then you set the color, font-family (Google Fonts is a good resource), font-size, and font-weight, to suit your needs for the first div.
On the second div again set the font-family, font-size, and font-weight to the same values, except set the color to transparent and add a colored border to the text. This will simulate the sort of outlined effect in the codepen.
Oh, and to make the two divs appear on the same line look at this answer.
While this will not automatically split the text between the two texts, it is a simple way to get a similar effect to what you want.
Related
I'm trying to build some search engine on my nwjs application and for several reasons, I can't use APIs like Mark.js because it causes dom changes wrapping some HTML tag around the word I want to find. That is why I want to use text selection to represent the highlight but I don't know-how.
Sounds like you want this:
https://github.com/nwutils/find-in-nw
It will also add dom wrappers, but removes them when done.
The only other way I can think of doing what you want would be:
Detect the x,y coordinates of text on the page
Good luck. Text reflows based on layout and browser width. If the text is not wrapped in an element I'm not sure how to get it's coords or size (bounding box/rect)
Create an absolute positioned element above it with a mix-blend-mode: darken
This would work for dark text on a background lighter than your highlight. So like white text on a black background with a yellow highlight. But if it's white text on a black background you'd need mix-blend-mode: lighten. Also, good luck determining the background color and text as those can be stored on basically anywhere in the DOM.
You're better off just using that library, or finding a different way approach or define your problem space.
I am not sure if here is the best place to ask such question. But I have very little clue where to start with this and would appreciate if someone could point me to the right place.
And not sure what's the best search term for this.
I am trying to re-create such typography effect. If you look at "Organic", it changes fill color and spacing as the user scroll down the page. The fill color is filling half way in the text.
https://dribbble.com/shots/2623261-Landing-Page-Animation
Is CSS possible? Or SVG? If yes, what areas should I be investigating?
*Updated: I have found the article for this.
https://css-tricks.com/reverse-text-color-mix-blend-mode/
It is possible with CSS.
Check the answer here. It is simple effect.
Basically, you add multiple text. One with white and one with black color in different div and you add clipping to each div, so when you scroll, it appears like the effect you want.
How to shape a input text box like a pyramid?
Please see the image at
I want to make a contact form like as this image.
Please let me know how i can i do this.
Thanks in advance.
To make your contact form as displayed in the image. you have to be little tricky.
Please see the image below.
The highlighted part indicates the Size of your text-box. Rest is the CSS in your background and similar CSS for text box is applied so that it looks merged with the background CSS.
There are many ways to achieve this. Best thing that comes to my mind is that you can use this pyramid as a background of a div. Then place text boxes on that div. Style them to look like on the image,
.textbox{
background-color:transparent;
border:none;
color:white
}
is a example. You can use different width for different text boxes to get the desired look.
So I have, say a button with a gradient from one arbitrary color to another. Is there a systematic way to with code (a) check if the current text color will or will not work and (b) if the current text color doesn't work, is there a way to generate a text color that will work over the gradient? I am changing the gradients of certain buttons, based on user input, and need to update the font color if necessary.
Note, I recognize that this is a fairly well solved problem for solid color backgrounds (for instance, see here: http://www.particletree.com/notebook/calculating-color-contrast-for-legible-text/).
If you're looking for automatic detection, I would maybe start here:
http://khan.github.io/tota11y/
This is a jQuery plug-in that checks background/foreground color for accessibility, on the example if you click the bottom left icon and then click "Contrast" it will point out the issues on your page. It looks like it works with gradients, so perhaps you can modify this in a way that helps you choose your colors.
For more manual approaches:
This chrome plugin says it works with gradients:
https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll
Wave:
http://wave.webaim.org
So about to lose my marbles over this one..
My Problem: I need to have text within a unordered list that vertically aligns baseline, but also does something like (text-overflow:ellipsis) ONLY after one line wrap .
What I'm coming to a conclusion on is this CAN NOT only be done with CSS, (if it can please show me!)
Here's a fiddle if it helps!
http://jsfiddle.net/5NVze/
Also a image of what I'm trying to accomplish...
http://img535.imageshack.us/img535/2307/exampleps.jpg
So solution is you CAN NOT accomplish this with just css!
Here is a simple example with Mootools/CSS http://jsfiddle.net/5NVze/5/