Public AI explainer video
અંક ૧: border-radius (ગોળાકાર ખૂણા) જો તમારે ઈમેજના...
અંક ૧: border-radius (ગોળાકાર ખૂણા) જો તમારે ઈમેજના તીક્ષ્ણ ખૂણાઓને સોફ્ટ કે ગોળ કરવા હોય, તો આપણે border-radius વાપરીશું." CSS img { width: 250px; height...
Prompt
Source idea used to generate this video.
અંક ૧: border-radius (ગોળાકાર ખૂણા) જો તમારે ઈમેજના તીક્ષ્ણ ખૂણાઓને સોફ્ટ કે ગોળ કરવા હોય, તો આપણે border-radius વાપરીશું." CSS img { width: 250px; height: 250px; border-radius: 15px; /* ખૂણા સહેજ ગોળ થશે */ } "અને જો તમારે ઈમેજને પૂરેપૂરી Circle (ગોળ) બનાવવી હોય, તો border-radius: 50% કરી દેવાનું!" અંક ૨: box-shadow (3D શૅડો ઇફેક્ટ) "ઈમેજને બેકગ્રાઉન્ડથી અલગ પાડવા અને 3D ઇફેક્ટ આપવા માટે આપણે box-shadow વાપરીશું. આમાં આપણે X-offset, Y-offset, Blur radius અને Color નક્કી કરીએ છીએ." CSS img { box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25); } અંક ૩: object-fit: cover (ફોટો ખેંચાઈ ન જાય તે માટે) "જ્યારે આપણે ઈમેજની Width અને Height આપીએ છીએ, ત્યારે ક્યારેક ફોટો ખેંચાઈ (Stretch) જાય છે. તેને પરફેક્ટ ફિટ કરવા માટે આ પ્રોપર્ટી વાપરો:" CSS img { object-fit: cover; }
More examples