Tag Archives: pseudo element

CSS Selector Pseudo Classes and Elements Tutorial

Posted on August 8, 2026 by admin

Yesterday’s CSS 3D Transform Selector Rotations Tutorial “worked into” what we want to hone in on, today, regarding more CSS ideas. Additionally to yesterday’s honing in on CSS selectors, there are two categories of selector sophistication (you’d have only reached, … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged 3D, axes, axis, clause, combinator, context, CSS, dropdown, element, HTML, intervention, Javascript, multiple, onchange, order, programming, prompt, pseudo, pseudo class, pseudo element, pseudo selector, rotation, select, selector, selectors, stop press, style, styling, syntax, transform, tutorial | Leave a comment

Colouring In Drag and Drop Reveal Wikipedia Images Tutorial

Posted on May 8, 2024 by admin

At first, today, we thought we’d apply new “show Wikipedia image” ideas via … Ajax methodologies … but then saw that … iframe … <iframe onload=ouriaj(this); id=”ourifaj” src=” style=display:none;></iframe> … calls … better fitted in with our functionalities, but the … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged absolute, Ajax, alert, animation, answer, background, background image, background-position, background-repeat, background-size, border, browse, browsing, button, Camer, canvas, cell, class, clip art, clone, co-ordinates, collaborate, collaboration, column, confirm, country, CSS, dataset, dblclick, device, Did you know, dimensions, DOM, doodle, doodling, double click, drag, drag and drop, dragover, drop, email, emoji, emoji flag, encoding, encryption, end tag, entity, flag, focus, game, games, genericize, geography, geojson, geospatial, getBoundingClientRect, Google, grid, guess, hashtag, hashtagging, height, HTML, html entity, HTML5, IFRAME, image, image search, image URL, imagery, images, innerHTML, iOS, iPad, iPhone, ISO 3166-2, Javascript, keyboard, latitude, left.width, location.hash, longitude, mailto, Mercator, mercator projection.opacity, minesweeper, mobile, mountain, mouse, mouse wheel, multiple, multiple background, navigation, nickname, number, oncontextmenu, ondblclick, ondragover, onkeydown, onload, overlay, palette, percentage, photo, photograph, PHP, pixel, pixels, platform, polyline, popup, popup window, postcard, processing, programming, proof of concept, proportional, pseudo class, pseudo element, pseudo selector, px, question, quiz, range, redo, resolution, responsive design, revael, reveal, river, river.world, rivers, row, scroll, share, sharing, size, SMS, stop press, style, stylesheet, styling, SVG, table, table cell, tag, television, text, top, transparency, tutorial, underlay, undo, units, url, user experience, UX, value add, warerfall, width, Wikipedia, world, world map | Leave a comment

Colouring In Drag and Drop Mobile Journey Game Tutorial

Posted on May 3, 2024 by admin

We needed to considerably change yesterday’s Colouring In Drag and Drop Pseudo Element Content Tutorial “Journey Game” logic to work with mobile platforms, to do with … for “easy” Journey Game options we change size of “mytable” table and hide … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, iOS, Tutorials | Tagged absolute, alert, animation, answer, background, background image, background-position, background-repeat, background-size, border, browse, browsing, button, Camer, canvas, cell, class, clip art, clone, co-ordinates, collaborate, collaboration, column, confirm, country, CSS, dataset, dblclick, device, Did you know, dimensions, DOM, doodle, doodling, double click, drag, drag and drop, dragover, drop, email, emoji, emoji flag, encoding, encryption, end tag, entity, flag, focus, game, games, genericize, geography, geojson, geospatial, getBoundingClientRect, Google, grid, guess, hashtag, hashtagging, height, HTML, html entity, HTML5, image, image search, image URL, innerHTML, iOS, iPad, iPhone, ISO 3166-2, Javascript, keyboard, latitude, left.width, location.hash, longitude, mailto, Mercator, mercator projection.opacity, minesweeper, mobile, mountain, mouse, mouse wheel, multiple, multiple background, navigation, nickname, number, oncontextmenu, ondblclick, ondragover, onkeydown, overlay, palette, percentage, photo, photograph, PHP, pixel, pixels, platform, polyline, popup, popup window, postcard, processing, programming, proof of concept, proportional, pseudo class, pseudo element, pseudo selector, px, question, quiz, range, redo, resolution, responsive design, revael, reveal, river, river.world, rivers, row, scroll, share, sharing, size, SMS, stop press, style, stylesheet, styling, SVG, table, table cell, tag, television, text, top, transparency, tutorial, underlay, undo, units, url, user experience, UX, value add, warerfall, width, Wikipedia, world, world map | Leave a comment

Colouring In Drag and Drop Pseudo Element Content Tutorial

Posted on May 2, 2024 by admin

Our current Colouring In web application project has relied a lot on HTML table, then tbody, then tr (row), then td (table cell) elements, believe it or not, up to today, not requiring any … traditional content (in Javascript DOM, … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged absolute, animation, answer, background, background image, background-position, background-repeat, background-size, border, browse, browsing, button, Camer, canvas, cell, class, clip art, clone, co-ordinates, collaborate, collaboration, column, country, CSS, dataset, dblclick, device, Did you know, dimensions, DOM, doodle, doodling, double click, drag, drag and drop, dragover, drop, email, emoji, emoji flag, encoding, encryption, end tag, entity, flag, focus, game, games, genericize, geography, geojson, geospatial, getBoundingClientRect, Google, grid, guess, hashtag, hashtagging, height, HTML, html entity, HTML5, image, image search, image URL, innerHTML, iOS, iPad, iPhone, ISO 3166-2, Javascript, keyboard, latitude, left.width, location.hash, longitude, mailto, Mercator, mercator projection.opacity, minesweeper, mobile, mountain, mouse, mouse wheel, multiple, multiple background, navigation, nickname, number, oncontextmenu, ondblclick, ondragover, onkeydown, overlay, palette, percentage, photo, photograph, PHP, pixel, pixels, platform, polyline, popup, postcard, processing, programming, proof of concept, proportional, pseudo class, pseudo element, pseudo selector, px, question, quiz, range, redo, resolution, responsive design, revael, reveal, river, river.world, rivers, row, scroll, share, sharing, size, SMS, stop press, style, stylesheet, styling, SVG, table, table cell, tag, television, text, top, transparency, tutorial, underlay, undo, units, url, user experience, UX, value add, warerfall, width, Wikipedia, world, world map | Leave a comment

Colouring In Drag and Drop Browse Button CSS Tutorial

Posted on April 30, 2024 by admin

Some HTML features that interface to the underlying operating system, you may have noticed yourself, are more restricted regarding how you can style them, than the usual HTML element catalogue. One which is always coming up, in this regard, for … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged absolute, animation, answer, background, background image, background-position, background-repeat, background-size, border, browse, browsing, button, Camer, canvas, cell, class, clip art, clone, co-ordinates, collaborate, collaboration, column, country, CSS, dataset, dblclick, device, Did you know, dimensions, doodle, doodling, double click, drag, drag and drop, dragover, drop, email, emoji, emoji flag, encoding, encryption, entity, flag, focus, game, games, genericize, geography, geojson, geospatial, getBoundingClientRect, Google, grid, guess, hashtag, hashtagging, height, HTML, html entity, HTML5, image, image search, image URL, iOS, iPad, iPhone, ISO 3166-2, Javascript, keyboard, latitude, left.width, location.hash, longitude, mailto, Mercator, mercator projection.opacity, mobile, mountain, mouse, mouse wheel, multiple, multiple background, navigation, nickname, number, oncontextmenu, ondblclick, ondragover, onkeydown, overlay, palette, percentage, photo, photograph, PHP, pixel, pixels, platform, polyline, popup, postcard, processing, programming, proof of concept, proportional, pseudo class, pseudo element, pseudo selector, px, question, quiz, range, redo, resolution, responsive design, revael, reveal, river, river.world, rivers, row, scroll, share, sharing, size, SMS, stop press, style, stylesheet, styling, SVG, table, table cell, television, text, top, transparency, tutorial, underlay, undo, units, url, user experience, UX, value add, warerfall, width, Wikipedia, world, world map | Leave a comment

Inhouse CSS Pseudo Element Co-ordinate Hover Tutorial

Posted on July 1, 2020 by admin

Today’s progress on top of yesterday’s Inhouse CSS Pseudo Element Co-ordinate Tutorial “proof of concept” feeling work is to allow non-mobile platforms respond to “the hover” (ie. Javascript) onmouseover event. We decide to allow a brief “preview” of what a … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged above, below, click, co-ordinates, CSS, hover, HTML, Javascript, left, long hover, onclick, onmouseout, onmouseover, place, programming, proof of concept, pseudo element, right, style, styling, tutorial | Leave a comment

Inhouse CSS Pseudo Element Co-ordinate Tutorial

Posted on June 30, 2020 by admin

We’re looking further into the … Inhouse CSS Pseudo Element (:andbelow … and today adding :andleft :andabove :andright) co-ordinate styling … ideas we started with yesterday’s Haiku Animated Gif Creator Tutorial. Going into more practicalities here we found that if … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged above, below, click, co-ordinates, CSS, HTML, Javascript, left, onclick, place, programming, proof of concept, pseudo element, right, style, styling, tutorial | Leave a comment

Haiku Animated Gif Creator Tutorial

Posted on June 29, 2020 by admin

Today, we’re coming at Haiku creation from a different place to … the Speech to Text ESL Tutorial way … in favour, today, of … an animated GIF approach These two ideas suit, as with the recent progress we made … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged animated gif, calc, class, collaboration, CSS, Did you know, div, email, getBoundingClientRect, haiku, horizontal rule, hr, HTML, Javascript, PHP, programming, pseudo element, share, sharing, SMS, textarea, tutorial | Leave a comment

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Search for:
Recent Posts
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
October 2026

S M T W T F S

1 2 3

4 5 6 7 8 9 10

11 12 13 14 15 16 17

18 19 20 21 22 23 24

25 26 27 28 29 30 31

« Sep
Meta
Tags
Ajax animation background button canvas command line CSS Did you know DOM dropdown email emoji event form game Google Google chart hashtag HTML IFRAME image iOS Javascript MAMP media mobile navigation onclick overlay PHP popup programming select share sharing SMS SVG table text textarea tutorial url video web browser webpage
Your Background Image
OnTopList

October 2026
S	M	T	W	T	F	S
	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

I like the single-row radio-play approach for keeping the controls compact while still making each selection clear. When I’m checking a calculation alongside a tutorial, I use StepStat to see the intermediate steps; how do you handle the layout when the playlist gets much longer?

The idea of mapping a video's key scenes, mood, pacing, and audio before production resonates with me — it's a lot like working out an anagrampuzzle, where the same pieces only make sense once you rearrange them into the right order. Do you usually sketch the mind map before or after the script is locked?

This is a helpful introduction to mind mapping, especially the explanation of how an unfamiliar .mm file can lead to discovering a practical visual-thinking tool. Mind maps are also useful for planning creative projects: I often map out a video’s key scenes, mood, pacing, and audio needs before production. Once that structure is clear, tools such as Flow Music can create AI background music for videos from a prompt, making it easier to match the soundtrack to each part of the visual plan. Thanks for sharing this accessible primer.

Thanks. Since then, a Shower Songs project at https://www.rjmprogramming.com.au/HTMLCSS/shower_songs.html is an improvement regarding "Radio Play" on mobile platforms.

This is a thoughtful example of using a single-row layout and scroll behavior to reveal media progressively. I especially liked the way the tutorial ties the gallery to real interaction details rather than treating the UI as a static mockup. For readers experimenting with the next stage of visual prototyping, LTX 2.3 Free collects prompt examples and workflow guidance for planning AI video scenes; the same attention to camera movement and timing is useful when turning a storyboard into motion.

Tag Archives: pseudo element

Inhouse CSS Pseudo Element Co-ordinate Hover Tutorial

Inhouse CSS Pseudo Element Co-ordinate Tutorial

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Latest Comments

Tag Archives: pseudo element

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList