Conversor de Unidades de Força

:root {
–primary-color: #3498db;
–secondary-color: #2c3e50;
–accent-color: #e74c3c;
–light-color: #ecf0f1;
–dark-color: #2c3e50;
–text-color: #333;
–card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
–hover-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
–transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
color: var(–text-color);
line-height: 1.6;
overflow-x: hidden;
}

/* Header Styles */
header {
background: linear-gradient(135deg, var(–primary-color), var(–secondary-color));
color: white;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 10;
}

.header-container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
display: flex;
align-items: center; /* Alinha verticalmente ao centro */
gap: 12px; /* Espaço entre ícone e título (ajuste livre) */
}
.logo i {
font-size: 1.5rem; /* Tamanho do ícone */
display: flex;
align-items: center; /* Se for FontAwesome, pode ajudar */
height: 1.5rem; /* Mantém a altura igual ao h1, ajuste se precisar */
}
.logo h1 {
font-size: 1.5rem;
font-weight: 600;
display: flex;
align-items: center; /* Garante alinhamento com o ícone também */
height: 1.5rem; /* Igual ao ícone para alinhar perfeitamente */
margin: 0; /* Remove margem padrão do h1 */
line-height: 1.5rem; /* Garante alinhamento vertical */
}

/* Main Content */
.container {
width: 90%;
max-width: 800px;
margin: 0.1rem auto;
padding: 2rem 0;
}

/* Calculator Container */
.calculator-container {
background: white;
border-radius: 15px;
box-shadow: var(–card-shadow);
padding: 2rem;
position: relative;
overflow: hidden;
}

.calculator-container::before {
content: ”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(–primary-color), var(–accent-color));
}

.calculator-header {
text-align: center;
margin-bottom: 2rem;
}

.calculator-header img {
max-width: 200px;
border-radius: 10px;
margin-bottom: 1rem;
box-shadow: var(–card-shadow);
}

.calculator-header h2 {
color: var(–secondary-color);
margin-bottom: 0.5rem;
font-size: 2rem;
}

.calculator-header p {
color: #666;
font-size: 1rem;
}

/* Form Section */
.form-section {
margin-bottom: 2rem;
}

.input-group {
margin-bottom: 1.5rem;
}

.input-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(–secondary-color);
display: flex;
align-items: center;
gap: 0.5rem;
}

.input-group input,
.input-group select {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1rem;
transition: var(–transition);
}

.input-group input:focus,
.input-group select:focus {
outline: none;
border-color: var(–primary-color);
box-shadow: 0 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

/* Result Section */
.result-section {
background: linear-gradient(to bottom left, #e6e6ff 0%, #d9d9d9 100%);
border-left: 5px solid var(–primary-color);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
display: none;
}

.result-section.show {
display: block;
animation: fadeInUp 0.5s ease;
}

.result-section h5 {
color: var(–secondary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.result-item {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}

.result-value {
font-weight: 600;
color: var(–primary-color);
}

/* Info Section */
.info-section {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
}

.info-section h5 {
color: var(–secondary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.info-section p {
color: #666;
line-height: 1.6;
}

/* Controls Section */
.controls {
display: flex;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}

.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: var(–transition);
display: flex;
align-items: center;
gap: 0.5rem;
}

.btn-calculate {
background: linear-gradient(135deg, var(–primary-color), #2980b9);
color: white;
}

.btn-calculate:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #2980b9, var(–primary-color));
}

.btn-reset {
background: linear-gradient(135deg, #6c757d, #5a6268);
color: white;
}

.btn-reset:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #5a6268, #6c757d);
}

.btn-tools {
background: linear-gradient(135deg, var(–primary-color), #2980b9);
color: white;
}

.btn-tools:hover {
transform: translateY(-3px);
box-shadow: var(–hover-shadow);
background: linear-gradient(135deg, #2980b9, var(–primary-color));
}

/* Footer Message */
.footer-message {
background: #f8f9fa;
border-radius: 10px;
padding: 1rem;
margin-bottom: 2rem;
color: #6c757d;
font-size: 0.9rem;
text-align: justify;
}

/* How Converter Works Section */
.howconverterwork {
background-color: white;
border-radius: 10px;
border: 1px solid rgb(204, 204, 204);
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px;
margin: 2rem auto;
padding: 20px;
max-width: 800px;
}

.howconverterwork h2 {
font-family: inherit;
color: var(–secondary-color);
margin-bottom: 1rem;
}

.howconverterwork p {
font-family: inherit;
color: #666;
line-height: 1.6;
margin-bottom: 1rem;
}

.howconverterwork ul {
margin-left: 20px;
margin-bottom: 1rem;
}

.howconverterwork li {
margin-bottom: 0.5rem;
}

/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive Design */
@media (max-width: 768px) {
.calculator-container {
padding: 1.5rem;
}

.calculator-header h2 {
font-size: 1.5rem;
}

.controls {
flex-direction: column;
}

.btn {
width: 100%;
justify-content: center;
}
}

@media (max-width: 480px) {
.calculator-container {
padding: 1rem;
}

.calculator-header h2 {
font-size: 1.3rem;
}
}


Conversor de Unidades de Força

Conversor de Unidades de Força

Converta entre Newton, Quilograma-força, Libra-força, Dyne e Quilopond

Newton (N)
Quilograma-força (kgf)
Libra-força (lbf)
Dyne (dyn)
Quilopond (kp)

Newton (N)
Quilograma-força (kgf)
Libra-força (lbf)
Dyne (dyn)
Quilopond (kp)


Resultado


Como usar o conversor

Para realizar a conversão, selecione a opção de força que deseja converter, e escolha a opção final desejada a ser convertida, logo após, digite um valor a converter, por padrão, temos a conversão de Quilograma-força (Kgf) para Newton (N), depois de escolher, clique no botão converter para visualizar o resultado!



Para mais ferramentas online grátis! Clique no botão “Todas Ferramentas” acima, e você será redirecionado à página com todas as ferramentas grátis em nosso site. Agradecemos por sua visita!

Como o Conversor de Unidades de Força Funciona?

O conversor de unidades de força é uma ferramenta essencial para engenheiros, físicos, estudantes e profissionais que trabalham com diferentes sistemas de unidades. Ele permite converter rapidamente entre as principais unidades de força usadas em diferentes contextos.

O conversor suporta as seguintes unidades de força:

  • Newton (N): A unidade de força no Sistema Internacional de Unidades (SI), definida como a força necessária para acelerar uma massa de um quilograma a uma taxa de um metro por segundo ao quadrado.
  • Quilograma-força (kgf): Uma unidade de força no sistema métrico gravitacional, definida como a força exercida pela gravidade terrestre padrão sobre uma massa de um quilograma.
  • Libra-força (lbf): Uma unidade de força no sistema imperial, definida como a força exercida pela gravidade terrestre padrão sobre uma massa de uma libra.
  • Dyne (dyn): Uma unidade de força no sistema CGS (centímetro-grama-segundo), definida como a força necessária para acelerar uma massa de um grama a uma taxa de um centímetro por segundo ao quadrado.
  • Quilopond (kp): Uma unidade de força no sistema métrico, equivalente a 9.80665 newtons ou aproximadamente 1 quilograma-força.

Para usar o conversor, basta digitar o valor que deseja converter, selecionar a unidade de origem e a unidade de destino, e clicar no botão “Converter”. O resultado será exibido com precisão de quatro casas decimais.

As conversões são baseadas nos fatores de conversão padrão reconhecidos internacionalmente, garantindo resultados precisos para suas aplicações técnicas e científicas.

Agradecemos por visitar o nosso blog e esperamos tê-lo(a) novamente por
aqui em breve. Não deixe de conferir nossos outros conteúdos sobre
tecnologia e assuntos variados.

Se inscreva no nosso Blog! Clique Aqui —
FVM Learning!

Nos ajude a divulgar nosso trabalho, compartilha nas redes
sociais, Facebook, Instagram, nos grupos de WhatsApp, uma simples atitude sua, faz com que cresçamos juntos e melhoremos o nosso trabalho!Forte abraço!
Deus vos Abençoe!
Shalom.

function converter() {
const fromForce = document.getElementById(“fromForce”).value;
const toForce = document.getElementById(“toForce”).value;
const valor = parseFloat(document.getElementById(“inputValor”).value);
const resultado = document.getElementById(“resultado”);
const conversionValue = document.getElementById(“conversion-value”);

// Validação básica
if (isNaN(valor) || valor <= 0) {
resultado.classList.remove('show');
alert("Por favor, insira um valor numérico válido.");
return;
}

let resultadoValue;

if (fromForce === "newton") {
if (toForce === "newton") resultadoValue = valor;
else if (toForce === "quilograma_forca") resultadoValue = valor / 9.80665;
else if (toForce === "libra_forca") resultadoValue = valor / 4.44822;
else if (toForce === "dyne") resultadoValue = valor * 100000;
else if (toForce === "quilopond") resultadoValue = valor * 0.101972;
} else if (fromForce === "quilograma_forca") {
if (toForce === "newton") resultadoValue = valor * 9.80665;
else if (toForce === "quilograma_forca") resultadoValue = valor;
else if (toForce === "libra_forca") resultadoValue = valor * 2.20462;
else if (toForce === "dyne") resultadoValue = valor * 980665;
else if (toForce === "quilopond") resultadoValue = valor * 10;
} else if (fromForce === "libra_forca") {
if (toForce === "newton") resultadoValue = valor * 4.44822;
else if (toForce === "quilograma_forca") resultadoValue = valor / 2.20462;
else if (toForce === "libra_forca") resultadoValue = valor;
else if (toForce === "dyne") resultadoValue = valor * 444822;
else if (toForce === "quilopond") resultadoValue = valor * 0.453592;
} else if (fromForce === "dyne") {
if (toForce === "newton") resultadoValue = valor / 100000;
else if (toForce === "quilograma_forca") resultadoValue = valor / 980665;
else if (toForce === "libra_forca") resultadoValue = valor / 444822;
else if (toForce === "dyne") resultadoValue = valor;
else if (toForce === "quilopond") resultadoValue = valor * 0.0000101972;
} else if (fromForce === "quilopond") {
if (toForce === "newton") resultadoValue = valor / 0.101972;
else if (toForce === "quilograma_forca") resultadoValue = valor / 10;
else if (toForce === "libra_forca") resultadoValue = valor / 0.453592;
else if (toForce === "dyne") resultadoValue = valor / 0.0000101972;
else if (toForce === "quilopond") resultadoValue = valor;
}

// Obter nomes das unidades para exibição
const fromUnitName = getUnitName(fromForce);
const toUnitName = getUnitName(toForce);

conversionValue.textContent = `${valor} ${fromUnitName} é igual a ${resultadoValue.toFixed(4)} ${toUnitName}`;

// Mostra o resultado
resultado.classList.add('show');
}

function getUnitName(unit) {
const unitNames = {
"newton": "Newton (N)",
"quilograma_forca": "Quilograma-força (kgf)",
"libra_forca": "Libra-força (lbf)",
"dyne": "Dyne (dyn)",
"quilopond": "Quilopond (kp)"
};
return unitNames[unit] || unit;
}

function redefinir() {
document.getElementById("fromForce").value = "quilograma_forca";
document.getElementById("toForce").value = "newton";
document.getElementById("inputValor").value = "";
document.getElementById("resultado").classList.remove("show");
}

function todasAsFerramentas() {
window.location.href = "https://www.fvml.com.br/p/ferramentas-online-para-engenheiros.html";
}

// Adiciona eventos aos botões quando a página carrega
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('convert-btn').addEventListener('click', converter);
document.getElementById('reset-btn').addEventListener('click', redefinir);
});

Compartilhar