{"id":964,"date":"2021-01-20T12:00:06","date_gmt":"2021-01-20T12:00:06","guid":{"rendered":"https:\/\/pappcseperke.hu\/?p=964"},"modified":"2023-08-22T18:35:09","modified_gmt":"2023-08-22T16:35:09","slug":"css-tutorials","status":"publish","type":"post","link":"https:\/\/pappcseperke.hu\/hu\/css-tutorials\/","title":{"rendered":"CSS Tutorials and Tools"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"964\" class=\"elementor elementor-964\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dfa2229 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dfa2229\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[{&quot;jet_parallax_layout_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;_id&quot;:&quot;388d7c0&quot;,&quot;jet_parallax_layout_image_tablet&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_image_mobile&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_speed&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:50,&quot;sizes&quot;:[]},&quot;jet_parallax_layout_type&quot;:&quot;scroll&quot;,&quot;jet_parallax_layout_direction&quot;:&quot;1&quot;,&quot;jet_parallax_layout_fx_direction&quot;:null,&quot;jet_parallax_layout_z_index&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x&quot;:50,&quot;jet_parallax_layout_bg_x_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y&quot;:50,&quot;jet_parallax_layout_bg_y_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size&quot;:&quot;auto&quot;,&quot;jet_parallax_layout_bg_size_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_animation_prop&quot;:&quot;transform&quot;,&quot;jet_parallax_layout_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;]}]}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9e8f0c0\" data-id=\"9e8f0c0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-175c967 elementor-widget elementor-widget-text-editor\" data-id=\"175c967\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p id=\"pagetitle\"><a href=\"http:\/\/www.wickham43.net\/divboxes.php\">Div boxes &#8211; position absolute, relative and fixed<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86ac9db elementor-widget elementor-widget-heading\" data-id=\"86ac9db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Basic CSS Tutorials, Tools, Depositories<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db4b96b elementor-widget elementor-widget-text-editor\" data-id=\"db4b96b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">Mozilla<\/a><\/li><li><a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-center-anything-with-css-align-a-div-text-and-more\/\">How to Center<\/a><\/li><li><a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">Codepen<\/a><\/li><li><a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noopener\">W3School\/css<\/a><\/li><li><a href=\"https:\/\/wattenberger.com\/blog\/css-cascade\" target=\"_blank\" rel=\"noopener\">Cascading Tutorial<\/a><\/li><li><a href=\"https:\/\/thirumanikandan.com\/posts\/learn-z-index-using-a-visualization-tool\" target=\"_blank\" rel=\"noopener\">Learn z-index<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-014be08 elementor-widget elementor-widget-text-editor\" data-id=\"014be08\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.youtube.com\/channel\/UCJZv4d5rbIKd4QHMPkcABCw\" target=\"_blank\" rel=\"noopener\">Kevin Powell&#8217;s Youtube Channel<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0521860 elementor-widget elementor-widget-heading\" data-id=\"0521860\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Specialized Online CSS generators and tools<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e3dc03c elementor-widget elementor-widget-text-editor\" data-id=\"e3dc03c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/cssgradient.io\/\" target=\"_blank\" rel=\"noopener\">CSS Gradient Creator<\/a><\/li><li><a href=\"https:\/\/speckyboy.com\/css-animation\/\">CSS Animation Tools<\/a><\/li><li><a href=\"http:\/\/tridiv.com\/#examples\">3D generator<\/a><\/li><li><a href=\"https:\/\/cubic-bezier.com\/#.34,1.56,.64,1\" target=\"_blank\" rel=\"noopener\">Cubic Bezier<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e0d07e2 elementor-widget elementor-widget-heading\" data-id=\"e0d07e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">CSS Typography<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ba32dc elementor-widget elementor-widget-text-editor\" data-id=\"9ba32dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/seek-oss.github.io\/capsize\/\">Capsize<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6294a1 elementor-widget elementor-widget-heading\" data-id=\"e6294a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">CSS Animation Tutorials<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-667eb1f elementor-widget elementor-widget-text-editor\" data-id=\"667eb1f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/webplatform.github.io\/docs\/tutorials\/css_animations\/\">Webplatform: CSS Animation Tutorial<\/a><\/li><li><a href=\"https:\/\/www.imaginarycloud.com\/blog\/how-to-make-css-animations\/\">Imaginary Cloud: CSS Animation Tutorial<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/animation\/\" target=\"_blank\" rel=\"noopener\">CSS-Tricks Animation Tutorial<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/using-multi-step-animations-transitions\/\">About multistep animations<\/a><\/li><li><a href=\"https:\/\/danielcwilson.com\/blog\/2020\/02\/motion-path-transforms\/\" target=\"_blank\" rel=\"noopener\">About CSS transformations<\/a><\/li><li><a href=\"https:\/\/csstriggers.com\/\">CSS Triggers<\/a><\/li><li><a href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/speed\/high-performance-animations\/\" target=\"_blank\" rel=\"noopener\">High performance animations explained<\/a><\/li><li><a href=\"https:\/\/medium.com\/@ryan_brownhill\/after-effects-to-css-79225c1d767e\" target=\"_blank\" rel=\"noopener\">Ryan Brownhill: after effects to css<\/a><ul><li><a href=\"https:\/\/projects.verou.me\/animatable\/\" target=\"_blank\" rel=\"noopener\">LIST of Examples of animatable properties<\/a><\/li><\/ul><\/li><li><a href=\"https:\/\/css-tricks.com\/guide-svg-animations-smil\/\" target=\"_blank\" rel=\"noopener\">SVG animations with smil<\/a><\/li><li><a href=\"https:\/\/danielcwilson.com\/blog\/2017\/02\/individual-transforms\/\" target=\"_blank\" rel=\"noopener\">Individual CSS Transform functions<br \/><\/a><\/li><li><a href=\"https:\/\/www.joshwcomeau.com\/animation\/a-friendly-introduction-to-spring-physics\/\" target=\"_blank\" rel=\"noopener\">Introduction to spring physics<\/a><\/li><li><a href=\"https:\/\/danielcwilson.com\/blog\/2020\/10\/additive-css-animations\/\" target=\"_blank\" rel=\"noopener\">Additive CSS animations<\/a><\/li><li><a href=\"https:\/\/www.joshwcomeau.com\/animation\/css-transitions\/\" target=\"_blank\" rel=\"noopener\">On timing<\/a><\/li><li><a href=\"https:\/\/tobiasahlin.com\/blog\/curved-path-animations-in-css\/\" target=\"_blank\" rel=\"noopener\">Trick for curved path animation in css<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd3db4d elementor-widget elementor-widget-heading\" data-id=\"cd3db4d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Effect Collections<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf7dea1 elementor-widget elementor-widget-text-editor\" data-id=\"bf7dea1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/ianlunn.github.io\/Hover\/\" target=\"_blank\" rel=\"noopener\">Hover Animations<\/a><\/li><li><a href=\"https:\/\/getcssscan.com\/css-box-shadow-examples\" target=\"_blank\" rel=\"noopener\">Box shadow examples<\/a><\/li><li><a href=\"https:\/\/tobiasahlin.com\/blog\/layered-smooth-box-shadows\/\" target=\"_blank\" rel=\"noopener\">About layered box shadows<\/a><\/li><li><a href=\"https:\/\/animista.net\/play\/basic\" target=\"_blank\" rel=\"noopener\">Animista.net<\/a><\/li><li><a href=\"https:\/\/animate.style\/\" target=\"_blank\" rel=\"noopener\">Animate.style<\/a><\/li><li><a href=\"https:\/\/projects.verou.me\/animatable\/\" target=\"_blank\" rel=\"noopener\">Animatable<\/a><\/li><li><a href=\"https:\/\/emilkowalski.github.io\/css-effects-snippets\/\" target=\"_blank\" rel=\"noopener\">CSS effect snippets by Emil Kowalski<\/a><\/li><li><a href=\"https:\/\/jnkkkk.github.io\/MoreToggles.css\/allToggles.html\" target=\"_blank\" rel=\"noopener\">Toggle collection by jnkkk<\/a><\/li><li><a href=\"https:\/\/connoratherton.com\/loaders\" target=\"_blank\" rel=\"noopener\">Loaders.css<\/a><\/li><li><a href=\"https:\/\/jonsuh.com\/hamburgers\/\" target=\"_blank\" rel=\"noopener\">Animated hamburgers<\/a><\/li><li><a href=\"http:\/\/bouncejs.com\/\" target=\"_blank\" rel=\"noopener\">bouncejs.com<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/css-animation-libraries\/\" target=\"_blank\" rel=\"noopener\">More animation libraries<\/a><\/li><li><a href=\"https:\/\/easings.net\/\" target=\"_blank\" rel=\"noopener\">Easings<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-776c294 elementor-widget elementor-widget-heading\" data-id=\"776c294\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Specific CSS effects<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27c475c elementor-widget elementor-widget-text-editor\" data-id=\"27c475c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><a href=\"https:\/\/codemyui.com\/flickering-light-text-animation-in-css\/\">Flickering Light (CSS Text Animation)<\/a><\/li><li><a href=\"https:\/\/tympanus.net\/Development\/ImageTransitions\/\">Image Transitions<\/a><\/li><li><a href=\"https:\/\/andrew.wang-hoyer.com\/experiments\/rain\/\">Typography rain<\/a><ul><li><a href=\"https:\/\/github.com\/ndrwhr\/andrewhoyer\/blob\/master\/blog_archive\/2011-02-14-making-it-rain.md\" target=\"_blank\" rel=\"noopener\">Tutorial for Typography rain<\/a><\/li><\/ul><\/li><li><a href=\"https:\/\/codepen.io\/FrankieDoodie\/pen\/dgVGad\" target=\"_blank\" rel=\"noopener\">Moving gradient on text<\/a><\/li><li><a href=\"https:\/\/codepen.io\/alvaromontoro\/pen\/RmRjvg\" target=\"_blank\" rel=\"noopener\">Movement with masks<\/a><ul><li><a href=\"https:\/\/codepen.io\/alvaromontoro\/post\/recreating-ipad-pro-commercial-animation-with-css\" target=\"_blank\" rel=\"noopener\">Movement with masks tutorial<\/a><\/li><\/ul><\/li><li><a href=\"https:\/\/nettuts.s3.amazonaws.com\/771_sticky\/step5.html\" target=\"_blank\" rel=\"noopener\">Sticky Notes<\/a><\/li><li><a href=\"https:\/\/codepen.io\/danwilson\/pen\/QWEGeqv\" target=\"_blank\" rel=\"noopener\">Blurred colourful circles, nice idea<\/a><\/li><li><a href=\"https:\/\/tympanus.net\/codrops\/2012\/06\/06\/image-accordion-with-css3\/\" target=\"_blank\" rel=\"noopener\">Image Accordion<\/a><\/li><li><a href=\"https:\/\/codepen.io\/marianab\/full\/XPOQaR\/\" target=\"_blank\" rel=\"noopener\">Building your store (css cartoon style loader)<\/a><\/li><li><a href=\"https:\/\/codepen.io\/pgalor\/pen\/WKoXqM\" target=\"_blank\" rel=\"noopener\">Slow floating (with hoverboard)<\/a><\/li><li><a href=\"https:\/\/codepen.io\/scoooooooby\/pen\/pecdI\" target=\"_blank\" rel=\"noopener\">Floating ghost<\/a><\/li><li><a href=\"https:\/\/codepen.io\/electerious\/details\/qPjbGm\/\" target=\"_blank\" rel=\"noopener\">Animated Button frame<\/a><\/li><li><a href=\"https:\/\/codepen.io\/akshat46\/full\/JwqoNN\" target=\"_blank\" rel=\"noopener\">Cool Menu Animation<\/a><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Div boxes &#8211; position absolute, relative and fixed Basic CSS Tutorials, Tools, Depositories Mozilla How to Center Codepen W3School\/css Cascading Tutorial Learn z-index Kevin Powell&#8217;s Youtube Channel Specialized Online CSS generators and tools CSS Gradient Creator CSS Animation Tools 3D generator Cubic Bezier CSS Typography Capsize CSS Animation Tutorials Webplatform: CSS Animation Tutorial Imaginary Cloud: [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[37,24],"tags":[],"class_list":["post-964","post","type-post","status-publish","format-standard","hentry","category-css","category-tools"],"_links":{"self":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/964","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/comments?post=964"}],"version-history":[{"count":3,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/964\/revisions"}],"predecessor-version":[{"id":7218,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/posts\/964\/revisions\/7218"}],"wp:attachment":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/media?parent=964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/categories?post=964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/tags?post=964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}