I'm trying to create a slideshow of sorts for just text. The closest thing I can come across are flash animations or scrolling marquees, which I do not want. I want to turn the banner below (which is an animated gif) into a slideshow with text using CSS.
http://www.crystalimagesinc.com/banner_animation.gif
The following link is as close to what I want to do as I can find, though it's not very good (and kind of messes with other elements on the page).
http://cssdeck.com/labs/css-news-ticker
What is a clean, relatively simple way to create a banner or "slideshow" of text, preferably in CSS?
Related
So, i got a Figma resouce and task for move it to website. I stucked with a trouble: My figma got very complex background. Different lines, shapes e.t.c. are included in background. So which is the best way to deal with? Should i just group all of these elements into single one and insert it as a single background image?
I need to move this background with different lines, which defined as separate elements in figma to website.
Breaking down a design concept / mockup into layers of images and HTML and CSS is a nuanced process, especially if the design is very rich.
I recommend studying these tutorials so that you can figure out the best strategy for converting your mockup into a professional and optimized HTML5 web page:
The 2020 HTML & CSS Crash Course - From Mockup to Product
Break Down and Integrate a Mockup
Now, with that said, here's how I would approach it:
The general gradient background should be rendered using CSS.
The circles, dot, and horizontal line coming from the circle, should be exported to SVG -or- transparent PNG. Position that PNG image over the CSS background. For that, I recommend checking this Stack Overflow question.
The numbers, being text with flat colors, should be implemented with floating divs, CSS, and WOFF fonts. I wouldn't export each number as separate images, because that's a very 90's old way of doing it, when HTML5 and CSS features were primitive. But this is up to you.
Rounded rectangles with transparent background that blurs anything behind them can be rendered with DIVS and CSS. The Cyrillic text is inside the DIVS. Check this Stack Overflow question for that.
I hope this helps!
We have a web page in which we are trying to show a side-bar.
This one should push the page increasing its right margin, as show in this example.
As you can see if you open the side-bar while the slide image hasn't changed it's more fluid than doing it when new images have appeared.
Our problem is caused by the slideshow, as we start with just one animation but, after a delay new animations are been launching, going to six (three slides and three text divs), and this makes the side-bar to be less fluid.
Is there any possible solution to prevent this happening or make the animations and transitions more fluid? If possible I'd like not using javascript.
I've been a user of clipboard.com a clipping service which is about to be shut down, one of the killer features was that you can clip a section of the webpage with all its contents and styling, it was like cropping an image, but instead of static content you could crop webpage content and then later you would be able to open the clipped content with all its styling, images, text, elements like buttons and forms, even flash was in place. And I want to create something similar, but I can't come up with an exact algorithm on how to do that.
From what I understand you can achieve something like that by inlining all styles for each element inside a DOM subtree and looks like this is what guys form clipboard.com did, here is an example of the clip:
a web clip http://monosnap.com/image/CIiUXkvHM3hKFxWkDbJQRtgtW.png
And this is its code in inspector clip code in inspector http://monosnap.com/image/PatIGWGY0ZjfSCdFnfwNkBGzy.png
But I'm afraid this naive approach wouldn't work, for instance if you are clipping a div which has negative margin it will effectively go of the viewport.
So the question is what would be a proper way to implement something like this?
I have an html5 page where I need to develop a small test. There's 2 columns with several buttons and whenever you click on one and drag the mouse, a line follows the mouse movement until it's released, snapping to the next button or getting erased.
I'm using divs for the buttons, since this is to be later delivered to a design crew and they need to be able to change images, texts and placements with css.
My problem is with canvas. I can't place it over the divs, so they don't cover the lines. I've tried svg too, but it has the same problem.
A coworker found the answer. Apparently I needed to use position AND z-index on the css for the canvas to be placed on the layer properly. Go figure
I have a website with a home page that consists of a large image slider (FlexSlider) at the top of the page, and two rows of four images below it, with each of these images having a caption that overlays it.
Currently, when the page loads for the first time, all of the high-res images for the image slider will be loaded before any of the 8 smaller images below it. The result of this is that while all of the slider images load, there are a bunch of ugly captions all stacking ontop of each other and then when all the slider images have loaded, the subsequent images finally load and the page looks normal.
Is there any way to make the slider images load last?
I don't know any way CSS alone can solve this problem. If you have access to Javascript, it becomes a lot easier to solve.
Use a lightweight default banner image:
Something that loads very quickly and acts as a placeholder for slider images while they load.
Javascript onload: Use Javascript to begin substituting the images after the page is fully rendered. You have a placeholder making sure the layout still looks good (no font mashing or broken layout for lack of a loaded image) which gets neatly substituted when the image is ready.
No render blocking, no messed up layout. Additional overhead of some Javascript (minor) and a generic banner image (should be minor if highly optimized).